用Ext 2.0 combobox 做的省份和城市联动选择框
2008-04-18 11:38
330 查看
因项目需要,做了这个,发上来给大家参考一下,呵呵。
刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式,然后直接附加到store的data里更简单,而且也方便城市的数据的载入。
我们来看看两个comboBox的定义:
comboBox的其它定义我就不详细说了,有兴趣可以参考我的文章《Ext2.0form使用实例》。我们重点研究一下它的sotre的定义。省份的store定义如下:
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联动的其它例子,呵呵。
点击这里下载例程。
刚开始的思路是通过定义好的数组通过combobox的store的loadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式,然后直接附加到store的data里更简单,而且也方便城市的数据的载入。
我们来看看两个comboBox的定义:
varprovinceComBo=newExt.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:newExt.data.SimpleStore({fields:["text","city"],data:citys,sortInfo:{field:'text'}}), listeners:{ select:function(combo,record,index){ cityCombo.clearValue(); cityCombo.store.loadData(record.data.city); } } }) varcityCombo=newExt.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:newExt.data.SimpleStore({fields:["text"],data:[],sortInfo:{field:'text'}}) }); |
store:newExt.data.SimpleStore({fields:["text","city"],data:citys,sortInfo:{field:'text'}}), listeners:{ select:function(combo,record,index){ cityCombo.clearValue(); cityCombo.store.loadData(record.data.city); } } |
城市combobox的store定义没什么特别,就是显示城市名称可以了。
在两个combobox中我还设置了一个排序(sortInfo:{field:'text'}),这样就更方便了。不过要按中文排序,得重载store的applySort属性就行了,具体可以参考一下地址:
具体的数据定义可看一下例程里面的city.js。
如果需要一个id怎么办?重新定义一下store的字段和修改city的数据定义就可以了。如果数据在后台,则可以通过选择省份后动态修改city的url就行了。
希望通过这个例子,大家可以很轻松的做出combobox联动的其它例子,呵呵。
点击
相关文章推荐
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- 用Ext 2.0 combobox 做的省份和城市联动选择框
- Ext2.0本地模式动态修改combobox选择项
- jquery基于layui实现二级联动下拉选择(省份城市选择)
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- Ext2.0本地模式动态修改combobox选择项
- DOM练习3-二级联动菜单(选择省份城市)
- DOM练习3-二级联动菜单(选择省份城市)
- js的二级联动实现省份城市的选择
- Ext2.0本地模式动态修改combobox选择项
- 省市二级联动 通过省份选择城市 JS的简单应用 二级下拉列表
- wheel自定义控件,实现城市三级联动,时间选择的功能简单使用
- 基于XML,以POST方式,完成省份-城市二级下拉联动
- IOS UIPickerView的简单使用 省份+城市 联动
- 如何实现下拉选择省份后,后续单元格能选择对应的城市和县区
- HotCity小程序城市选择器 开源 三级联动,数据可导出