Extjs 用本地数据实现combo二级联动

　　网页上经常会用到下拉框联动，比如选择地区时，先选择省再选择市。那么用Extjs的combo怎么来实现这一功能呢？下面是一个使用本地数据的例子。思路是这样的：先准备省份和城市的二维数组，然后建立数据转换器，再来制作ComboBox，最后也是最关键的地方即添加select事件让combo关联起来。具体代码如下：

1.二维数组
//省份
var dataProvince = [[1, '河北'],[2,'江苏']];

//城市
var dataCityHebei = [[1,'唐山'],[2,'秦皇岛'],[3,'承德']];
var dataCityJiangsu = [[1,'南京'],[2,'苏州'],[3,'徐州']];

2.数据转换器
var stroeProvince = new Ext.data.SimpleStore({
　fields: ['value', 'text'],
　data: dataProvince
});
var stroeCity = new Ext.data.SimpleStore({
　fields: ['value', 'text'],
　data: []
});
城市的数据是一个空数组。

3.设置ComboBox，先定义2个combo，然后分别绑到html的input上面

var comboProvince = new Ext.form.ComboBox({
　triggerAction:’all’,
　readOnly:true,
　mode:’local’,
　store:storeProvince,
　valueField:’value’,
　displayField:’text’
});
var comboCity = new Ext.form.ComboBox({
　triggerAction:’all’,
　readOnly:true,
　mode:’local’,
　store:storeCity,
　valueField:’value’,
　displayField:’text’
});

comboProvince.applyTo(‘selProvince’);
comboCity.applyTo(‘selCity’);

4.给combo添加select事件监听
//选择省份时，根据不同的省份，给城市加载不同的数组
comboProvince.on(‘select’, function(cb){
　var province = cb.getValue();
　if(province==1){
　　storeCity.loadData(dataHebei);
　}else if(province==2){
　　storeCity.loadData(dataJiangsu);
　}else{
　}
});

//选择城市时，提示两个下拉框中的文本
comboCity.on(‘select’, function(){
　alert(comboProvince.lastSelectionText+comboCity.lastSelectionText);
});
　　好了，以上就是一个简单的combo二级联动，希望对你有所帮助，O(∩_∩)O~
原创文章请注明转载于知蚁博客，本文地址：http://www.letuknowit.com/archives/110

相关文章