ext 二级联动 combobox

源代码

{
xtype: 'combobox',
name: "areaid",
store: 'areainfoStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
emptyText: '',
displayField: 'area',
fieldLabel: '地市',
valueField: 'areaid'
},
{
xtype: 'combobox',
id: 'hallinfoIdset',
name: "hallinfoId",
store: 'hallStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
displayField: 'hallname',
fieldLabel: '营业厅',
valueField: 'hallid'
}

第一步 给第一个增加监听

{
xtype: 'combobox',
name: "areaid",
store: 'areainfoStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
emptyText: '',
displayField: 'area',
fieldLabel: '地市',
valueField: 'areaid',
listeners: {
"select": function() {
var hallinfoIdset = Ext.getCmp("hallinfoIdset"); //获取第二个组件
hallinfoIdset_store = hallinfoIdset.store; //获取第二个组件的store
hallinfoIdset.reset();//重新设置当前表单项的值为开始载入的值并且清除验证信息。
hallinfoIdset.clearValue();//清除当前在ComboBox中设置的任何值
hallinfoIdset.setValue('');//设置组件值空
hallinfoIdset.setRawValue("");//设置选中值空
hallinfoIdset_store.removeAll();//从 store 中移除所有的条目
hallinfoIdset_store.reload({
url: "hallinfo/findListByAreaid.do",
params: {
areaid: this.getValue()//获取选中的值
}
})
}
}
},
{
xtype: 'combobox',
id: 'hallinfoIdset',
name: "hallinfoId",
store: 'hallStore',
labelPad: 0,
labelWidth: 100,
allowBlank: false,
editable: false,
displayField: 'hallname',
fieldLabel: '营业厅',
valueField: 'hallid'
},

第二步 页面初始化的时候

var hallinfoIdset = Ext.getCmp("hallinfoIdset");
hallinfoIdset_store = hallinfoIdset.store;
hallinfoIdset_store.load({
url: "hallinfo/findListByAreaid.do",
params: {
areaid: obj.areaid
}
});

第三步 第二下拉框store 设置URL

//必须设置要不然每次都会先默认加载一次

Ext.define('operator.store.hallStore', {
extend: 'Ext.data.Store',
model: 'operator.model.hallModel',
fields: ['hallid', 'hallname'],
proxy: {
type: 'ajax',
url: ' ',
// url : 'hallinfo/findHallinfo.do',
actionMethods: 'post',
reader: {
type: 'json'
}
},
autoLoad: false
});