也已經寫了很久時間的extjs ，每次都用到很多的combobox，配置很多東西覺得實在是太麻煩，所以根據常用到的情況寫了一個簡便的combobox，再次記錄下來，以免放在某個地方忘記了找不到了。
定義一個基本的baseCombobox類，如下。
Ext.define('Admin.view.baseCmp.BaseCombobox', { extend: 'Ext.form.field.ComboBox', xtype: 'baseCombobox', editable: false, labelSeparator: ':', labelWdith: 0, triggerAction: 'all', labelAlign: 'right', //forceSelection: true,此屬性操作時，就算去掉文字后，失去焦點后還是會選擇上一次選擇的記錄 autoSelect: true, selectOnfocus: true, valueNotFoundText: '', name:'', queryMode: 'local', url:'', displayField: '', valueField: '', requires:['Admin.view.baseCmp.BaseComboboxController'], controller: 'baseComboboxController', emptyIndex:-1,//自定義屬性,空值所在下標，-1則不添加 selectIndex:0,//自定義屬性，自動選擇下標 params:null,//自定義屬性，數據參數 listeners: { render: 'getComboData', scope: 'controller' },});Ext.define('Admin.view.baseCmp.BaseComboboxController', { extend: 'Ext.app.ViewController', alias: 'controller.baseComboboxController', getComboData: function (combo) { Ext.Ajax.request({ url: combo.url, method :'POST', params:combo.params, success: function (response) { var dataJson = Ext.decode(response.responseText); if(dataJson.state != 200 || dataJson.data == null || dataJson.data.length == 0) { //服務器返回錯誤 return ; } var data = dataJson.data; //插入“全部”選項 if(combo.emptyIndex >= 0) { var emp = {}; emp[combo.displayField] = "全部"; emp[combo.valueField] = "全部"; Ext.Array.insert(data,combo.emptyIndex,[emp]); } var store = Ext.create('Ext.data.Store', { fields: Ext.Object.getKeys(data[0]), data: data }); combo.setStore(store); //如果指定選中某個值 if(combo.selectValue != null) { combo.select(combo.selectValue); } else { //如果指定選中某個下標的值，-1為最后一個，> 0 則為第selectIndex個 if(combo.selectIndex == -1) { console.log(data.length - 1); combo.select(data[data.length - 1][combo.valueField]); } else { combo.select(data[combo.selectIndex][combo.valueField]); } } //觸發選中事件 //combo.fireEvent('select', combo,store.getAt(combo.selectIndex)); }, failure: function (response) { //請求服務器失敗 } }); }});調用實例：
{ xtype: 'baseCombobox', name: "typeName", fieldLabel: "類型", displayField: 'typeName', valueField: 'id', emptyIndex:0, multiSelect:false, url:"/itemType/list", listeners:{ select:'query' }},這樣大大方便了我使用combobox，如果某種類型的combobox需要重復使用，建議還是直接定義好他，到需要用的時候一句：
xtype: 'itemTypeCombobox',就可以搞定了，代碼看起來簡潔又漂亮。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
