本文主要讲解了如何实现ExtJS4.2中下拉列表(Combobox)的级联选择,即先选择省份,自动将城市过过滤为该省份下的城市列表,实例图片如:
在线演示 / 示例代码
省份-下拉列表:
{ xtype:'combo', id:'provinceCombo', labelStyle : 'text-align:right', fieldLabel: '省', displayField: 'text', valueField: 'value', store: createStore(), editable : false, queryMode: 'local', typeAhead: true, listeners: { change: function(combo, nv, ov){ if(nv!=ov){ var cityCombo = Ext.getCmp("cityCombo"); cityCombo.clearValue(); var cityStore=cityCombo.getStore(); cityStore.load(); } } } }
城市-下拉列表:
{ xtype: 'container', flex: 1, layout: 'anchor', items: [{ xtype:'combo', id:'cityCombo', labelStyle : 'text-align:right', fieldLabel: '市', editable : false, displayField: 'text', valueField: 'value', store: 'CityStore', queryMode: 'remote', typeAhead: true }] }
城市下拉列表对应的Store-CityStore:
Ext.define('Itdatum.store.CityStore', { extend: 'Ext.data.Store', fields:['id','value','text','parentid'], autoLoad: false, proxy: { type: "ajax", url: "json/city.json", reader: { type: "json", root: "data" } }, listeners: { 'load': function(store, operation, eOpts){ var proviceCode=Ext.getCmp('provinceCombo').getValue(); store.filterBy(function(record) { return record.get('parentid') == proviceCode; }); } } });
注意:城市下拉列表需要设置queryModel: 'remote',否则有缓存问题,即城市下拉列表加载数据时采用filterBy来过滤时首次加载有缓存。