用Ext 2.0 combobox 做的省份和城市联动选择框

因项目需要，做了这个，发上来给大家参考一下，呵呵。

刚开始的思路是通过定义好的数组通过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联动的其它例子，呵呵。

点击这里下载例程。

转载于:https://www.cnblogs.com/muyuge/archive/2007/10/23/6333863.html

用Ext 2.0 combobox 做的省份和城市联动选择框相关推荐

jquery省份城市联动选择下拉框
<script type="text/javascript" src="__PUBLIC__/Medidata/js/jquery-1.8.3.min.js&quo ...
选择省份时，自动显示对应省份的城市
在很多网页中,都会有让用户选择城市的选项,那么,就需要我们用js来实现,当用户选择了省份,自动选择对应省份的城市. <head> <title></title> ...
Ext.form.field.ComboBox组合框
1.Ext.form.field.ComboBox主要配置 Ext.form.field.ComboBox主要配置项配置项类型说明 allQuery String 发往服务器用来查询全部信息的查 ...
[Ext]2.0探索(七)Grid使用介绍
[Ext]2.0探索(七)Grid使用介绍 2008年07月01日星期二 15:25 Ext2.0框架的Grid使用介绍最近空闲时间在学习Ext2.0框架,只有一个字的感叹"强& ...
从CSDN举办的SD2.0看“做啥网”的业务形态
做啥网是由波特网络开发运营的Web2.0全球互动分享社区.用户可以通过Web.IM.手机等方式随时发表自己正在做的事情,同时支持文字.图片.视频和文件的发布.做啥大屏幕是一个使用手边的工具(一台投影 ...
ext 2.0 Combos 使用指南
这是个简单的例子,只需要简单的解释下,按步就班,从简单到复杂! 例子由两部分组成:lcombo.html 和 lcombo.js. lcombo.html view plain copy to cli ...
在线协作白板背后的核心技术，来看看拍乐云2.0又做了哪些升级？
在线协作白板平台「Miro」近日宣布获得新一轮4亿美元融资,估值达到175亿美元,这则消息让更多人关注互动白板这个赛道以及背后的核心技术. 拍乐云互动白板作为实时音视频的能力补充,可以快速实现应用内的 ...
python可以做web_Python3.0版本做web可以吗?
在群里聊天,我说我在学习3.0版本的python,一个人说让我从2.7学,因为3.0不能做web,这是真的么?想在这里找到一个真实的答案谢谢. 完全不是这样的. 用python做web你需要考虑两点 ...
从0开始做垂直O2O个性化推荐-以58到家美甲为例
从0开始做垂直O2O个性化推荐上次以58转转为例,介绍了如何从0开始如何做互联网推荐产品(回复"推荐"阅读),58转转的宝贝为闲置物品,品类多种多样,要做统一的宝贝画像比较难,而 ...

用Ext 2.0 combobox 做的省份和城市联动选择框

用Ext 2.0 combobox 做的省份和城市联动选择框相关推荐

最新文章

热门文章