ExtJS4.2 下拉列表Combobox级联选择

本文主要讲解了如何实现ExtJS4.2中下拉列表（Combobox）的级联选择，即先选择省份，自动将城市过过滤为该省份下的城市列表，实例图片如：


在线演示  /  示例代码


省份-下拉列表：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

{ 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(); } } } }

城市-下拉列表：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

{ 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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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来过滤时首次加载有缓存。