因项目需要,做了这个,发上来给大家参考一下,呵呵。
刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式,然后直接附加到store的data里更简单,而且也方便城市的数据的载入。
我们来看看两个comboBox的定义:
var provinceComBo=new Ext.form.ComboBox({
hiddenName:'province',
name: 'province_name',
valueField:"text",
displayField:"text",
mode:'local',
fieldLabel: '所在省份',
blankText:'请选择省份',
emptyText:'请选择省份',
editable:false,
anchor:'90%',
forceSelection:true,
triggerAction:'all',
store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),
listeners:{
select:function(combo, record,index){
cityCombo.clearValue();
cityCombo.store.loadData(record.data.city);
}
}
})
var cityCombo=new Ext.form.ComboBox({
hiddenName:'city',
name:'city_name',
valueField:"text",
displayField:"text",
mode:'local',
fieldLabel: '所在城市',
blankText:'请选择城市',
emptyText:'请选择城市',
editable:false,
anchor:'90%',
forceSelection:true,
triggerAction:'all',
store:new Ext.data.SimpleStore({fields: ["text"],data:[],sortInfo:{field:'text'}})
});
|
comboBox的其它定义我就不详细说了,有兴趣可以参考我的文章《Ext2.0 form使用实例》。我们重点研究一下它的sotre的定义。省份的store定义如下:
store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),
listeners:{
select:function(combo, record,index){
cityCombo.clearValue();
cityCombo.store.loadData(record.data.city);
}
}
|
store定义了两个字段,第一字段就是省份的显示和值字段,第二个字段就比较特殊了,保存了该省份的城市数组。这样的好处就是当出发选择事件的时候,直接将city字段的数据调入到城市的store就可以选择该省份的城市了,避免了通过循环对数据进行处理操作。不过在城市加载数据前,一定要清除城市选择的输入值(cityCombo.clearValue();)。
城市combobox的store定义没什么特别,就是显示城市名称可以了。
在两个combobox中我还设置了一个排序(sortInfo:{field:'text'}),这样就更方便了。不过要按中文排序,得重载store的applySort属性就行了,具体可以参考一下地址:
http://jstang.5d6d.com/thread-362-1-4.html
具体的数据定义可看一下例程里面的city.js。
如果需要一个id怎么办?重新定义一下store的字段和修改city的数据定义就可以了。如果数据在后台,则可以通过选择省份后动态修改city的url就行了。
希望通过这个例子,大家可以很轻松的做出combobox联动的其它例子,呵呵。
点击这里下载例程。
分享到:
相关推荐
用Ext 2.0 combobox 做的省份和城市联动选择框的例程
用Ext 2_0 combobox 做的省份和城市联动选择框 DOJO中国
ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
想把日期选择框单独拿出来用的看这里 A.6. 听说有人现在还不会汉化ext A.7. 碰到使用ajax获得数据,或者提交数据出现乱码 A.8. TabPanel使用autoLoad加载的页面中的js脚本没有执行 B. 修改日志 C. 后记 C.1. 2007...
这次只单独打包了本例子的html文件,大家注意一下js和css的路径就可以了
wpf comboBox 下拉框全国地址联动 的整个项目代码
datagridview里面使用combobox进行二级联动的一个使用效果。
用EXT来实现下拉框ComboBox 下拉框可以实现分页
利用jquery实现具有联动和搜索功能的下来选择框,只需要传入指定格式的数据源数组以及承载体对象就可以完成绑定。该功能定义了两个回调函数,一个是回调点击对象的Class,一个回调的是下拉框class、下拉框信息组集合...
NULL 博文链接:https://dengli19881102.iteye.com/blog/1046190
Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子
Ext 异步加载添加 删除节点 修改combobox选择项,相当好的东西,值得参考!希望对你有用!
该资源是war包,里面包括ComboBox中的各个参数, 详细讲解在我的文档中有
全部代码 注意路径 博文链接:https://avs110.iteye.com/blog/1156428
ext关于form表单和combobox的例子
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
Extjs4---combobox省市区三级联动+struts2
摘要:VB源码,数据库应用,城市菜单,三级联动 vb6 ComboBox中国城市三级联动演示,使用VB6实现中国城市数据库的三级联动查询!全国城市三级联动演示VisualBasic6.0版。
基于Ext3.4的一个扩展Combobox组件
NULL 博文链接:https://zhcl321.iteye.com/blog/1317526