Ext Combo 联动

Ext 2.0 Combox 二级联动

 

控件1： 省份

{ fieldLabel : '省份', xtype : 'combo', id : 'province', store : new Ext.data.JsonStore({ url : url // 获取Json的URL autoLoad: true, root : 'rows', fields: ['code','text'] }), mode : 'local', hiddenName: 'werks', // hiddenName,对应于后台用以取值的FormBean中一个属性 listeners:{ 'beforeselect': function(box, record, index){ Ext.getCmp('city').reset(); Ext.getCmp('city').store.filter('provinceCode', record.get('code')); }, }

 

控件2：市

{ fieldLabel: '市', xtype : 'combo', id : 'city', allowBlank: false, store : new Ext.data.JsonStore({ url : url, autoLoad: true, root : 'rows', fields:['provinceCode','code','text'] }), mode : 'local', valueField : 'code', displayField : 'text' }

 

      二级联动的下拉框已经完成。在 '控件1' 的'beforeselect'事件加监听，每次点击该控件后都会将 '控件2' 的值重置，同时针对 '控件1' 的内容对 '控件2' 的内容进行过滤。

 

关键点：

1. 控件1 ['code', 'text'] / 控件2 ['provinceCode', 'code', 'text']，联动后，控件2的 'provinceCode' 等于控件1的 'code'

2. 初始化数据全加载到本地 mode: 'local'

3. 过滤监听

 

 

扩展： 在做完二级联动后会发现只要父项的'code'和子项的'provinceCode'在父项的'beforeselect'监听事件中过滤即可，那么三级甚至N级联动一次类推即可完成