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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/11984612/viewspace-1271167/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/11984612/viewspace-1271167/