本文主要讲解了如何实现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博客 ” ，链接：https://blog.itpub.net/11984612/viewspace-1271167/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
