用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 做的省份和城市联动选择框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Oracle的时区问题
- 下一篇： Editplus PHP版