剛開始的思路是通過定義好的數組通過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聯動的其它例子，呵呵。
點擊這里下載例程。
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1839170
新聞熱點
疑難解答
