EXTJS二级下拉联动(省市联动)案例

这里要实现的级联是另一个思路：一开始装载所有的数据，然后通过过滤数据，实现数据的级联更新。举例如下：
我们需要客户选择所在省和所在市，通过下拉列表，先选择省，然后所在市的下拉列表中过滤出该省下的所有市，提供给用户选择。
数据库设计：建立代码、省市对应表，如：37－山东、3701－济南、3702－青岛、3703－淄博、…
在所在省下拉列表的store中，获取代码为两位长度的省市数据，这样将获取到所有的省名称列表
另外建立一个Store，检索代码长度超过两位长度的省市数据，这样将获取所有的市名称列表
Js代码 复制代码

var provinceStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadCity.do?method=getProvince' //获取所有的省列表的Ajax请求
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'code', mapping: 'code'},
{name: 'name', mapping: 'name'}
])
});
var cityStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadCity.do?method=getCity' //获取所有的市列表的Ajax请求
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'code', mapping: 'code'},
{name: 'name', mapping: 'name'}
])
});

{
fieldLabel: '所在省',
xtype:'combo',
store: provinceStore,
valueField :"name",
displayField: "name",
mode: 'remote',
forceSelection: true,
emptyText:'请选择所在省...',
hiddenName:'province',
editable: false,
triggerAction: 'all',
id: 'province',
name: 'province',
width: 400,
listeners:{
select : function(combo, record, index){
//获取当前选择的省代码，然后在cityStore过滤出所有属于这个省下的市
var cityField = conditionForm.form.findField("city");
cityField.setValue('');
var codeHead = record.get('code');
cityStore.filter('code', codeHead);

//新建一个SimpleStore，然后把过滤出来的结果添加到这个SimpleStore中
var newStore = new Ext.data.SimpleStore({fields: ['code', 'name']});
newStore.add(cityStore.getRange());

//设置所在市下拉列表的新的Store
cityField.store = newStore;

//设置所在市下拉列表的列表项的新的Store
if(cityField.view)
cityField.view.setStore(newStore);
}
}
},{
fieldLabel: '所在市',
xtype:'combo',
store: cityStore,
valueField :"name",
displayField: "name",
mode: 'remote',
forceSelection: true,
emptyText:'请选择所在市...',
hiddenName:'city',
editable: false,
triggerAction: 'all',
id: 'city',
name: 'city',
width: 400
}