當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/4/5 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了用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 做的省份和城市联动选择框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。