背景
我有 ExtJS 网格和选项,可以在 AJAX 的帮助下将新行/数据添加到网格和数据库中
要求
添加新数据时,我有两个组合框 A 和 B,而 B 依赖于 A,我想在 A 的值发生变化时过滤 B 中的值列表,
代码
Ext.define('Model.A', {
extend: 'Ext.data.Model',
fields: ['name', 'id', 'number']
});
Ext.define('Model.B', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'code']
});
商店
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'
}
}),
};
网格
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
});
我已经在receiveAjaxRequest
comboA更改的函数中引入了数据,这就是我尝试重新加载组合框的方式
data.B = responseJSON;
store.B.load();
PS:我对 ExtJS 不是很熟悉,代码是过去由其他开发人员编写的。我被分配了上面的需求块