Background
I have ExtJS grid and option to add new row/data into the grid and into the database with the help of AJAX
Requirement
When adding new data I have two combo boxes A & B, whereas B is dependent on A, I want to filter the list of values in B whenever the value for A changes,
Code
Ext.define('Model.A', {
extend: 'Ext.data.Model',
fields: ['name', 'id', 'number']
});
Ext.define('Model.B', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'code']
});
The Store
var store = {
A: new Ext.data.Store({
autoDestroy: true,
model: 'Model.A',
data: data.A,
proxy: {
type: 'memory'
}
}),
B: new Ext.data.Store({
autoDestroy: true,
model: 'Model.B',
data: data.B,
proxy: {
type: 'memory'
}
}),
};
The Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store.data,
title: "###########",
renderTo: "grid",
loadMask: true,
features: [filters],
columns: [{
// The ComboB
text: "B",
dataIndex: "comboB",
width: 250,
editor: {
xtype: "combo",
store: store.b,
displayField: "###",
valueField: "###",
forceSelection: true,
typeAhead: false,
allowBlank: false,
blankText: "required.",
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">{###} - {###}</tpl>'),
listConfig: {
getInnerTpl: function() {
return "{###} - {###}";
}
}
},
renderer: function(value) {
return data.B.code[value] + " - " + data.B.name[value];
}
}
.
. // other grid fields
.
,{
// The ComboA
text: "A",
dataIndex: "comboA",
width: 250,
editor: {
xtype: "combo",
store: store.insurances,
displayField: "###",
valueField: "###",
forceSelection: true,
typeAhead: false,
allowBlank: false,
blankText: "required.",
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">{###} - {###}</tpl>'),
listConfig: {
getInnerTpl: function() {
return "{###} - {###}";
}
},
listeners: {
change: function (e) {
A_ID = {"id":e.value};
grid.receiveAjaxRequest("URL",A_ID);
}
}
},
renderer: function(value) {
return data.A.number[value] + " - " + data.A.name[value];
},
filter: {
type: 'list',
options: data.insurancesFilter,
phpMode: true
}
}],
tbar: [{
// iconCls: 'icon-add',
text: 'Add',
scope: this,
handler: function () {
.
.
.
}
}],
plugins: [rowEditing],
newRecord: false,
listeners: {
beforerender: function() {
document.getElementById("grid").innerHTML = "";
}
},
/*
*The Ajax Request Where I have successfully
*Received the filtered data and now want to
*incorporate the data into the comboB
*/
receiveAjaxRequest: function (url, ajaxData) {
gridView = grid.getView();
gridView.setDisabled(true);
Ext.Ajax.request({
url: url,
params: ajaxData,
success: function(response) {
gridView.setDisabled(false);
//console.log(store.vaccines.data);
responseJSON = Ext.JSON.decode(response.responseText);
// This is how I tried to reload the combox box
data.B = responseJSON;
store.B.load();
//store.B.data = response;
console.log(store.B);
}
});
} //receiveAjaxRequest
});
I have already brought the data in receiveAjaxRequest
function on the change of comboA and this is how I tried to reload the combox box
data.B = responseJSON;
store.B.load();
PS: I'm not very familiar with ExtJS and the code was written by some other developer in past. And I'm assigned with the above Requirement Block
I have a web form with a bazillion check boxes. If the form is filled out incorrectly, none of the check boxes are reset (as an anti-frustration feature). Problem is, the reset button doesn't work to ...
I have a web form with a bazillion check boxes. If the form is filled out incorrectly, none of the check boxes are reset (as an anti-frustration feature). Problem is, the reset button doesn't work to ...
highcharts gets my hour time wrong I'm from venezuela just in case. I doing a real time system where I get in my db the time,seconds and miliseconds like 10:39:09:2 I apply the strtotime($time) then ...
highcharts gets my hour time wrong I'm from venezuela just in case. I doing a real time system where I get in my db the time,seconds and miliseconds like 10:39:09:2 I apply the strtotime($time) then ...
encodeURIComponent escapes all characters except the following: - _ . ! ~ * ' ( ) But is it possible to extend the functionality encode the above special characters as well. I know i can do ...
encodeURIComponent escapes all characters except the following: - _ . ! ~ * ' ( ) But is it possible to extend the functionality encode the above special characters as well. I know i can do ...
I ve drawn a pie chart graph using pie chart flot library.. I ve my own custom legend box. So I was trying to know if it is possible to hide the a particular slice based on user input. Like here Ive ...
I ve drawn a pie chart graph using pie chart flot library.. I ve my own custom legend box. So I was trying to know if it is possible to hide the a particular slice based on user input. Like here Ive ...