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

本文主要讲解了如何实现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来过滤时首次加载有缓存。
本文出自 “Itdatum” 博客，请务必保留此出处http://itdatum.blog.51cto.com/1152235/1553475