网页上经常会用到下拉框联动,比如选择地区时,先选择省再选择市。那么用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上面
<input type="text" id="selCity" />
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
v
很不错的博客网站,值得我关注,收藏起来先,,:)
技术型文章呀
呵呵,是啊,以后准备少写这类文章了
太过于专业了,没看懂
技术型的东西,有点看不懂
空中白鹤 很好的网站我不太董代码想学习
过来支持下!!!!
一如既往的专业!
看不懂,还使用下拉框吧。
有点看不懂什么意思哦
以后真的不打算来了,因为确实看不懂,只能在这里说些废话。
多谢屠龙大哥一直的支持,知蚁博客目前正在做一些转变
屠龙大哥说的是啊,
这种东西确实我直接忽略,
一是技术性太强根本不懂,
二是暂时应用不到。
不过我觉得这种文章还是要写,开个专栏哈哈!
技术性文章
只看不评论哟
这不是评论了嘛,应该只评论不看,呵呵
原来可以这样实现啊
我爱你!