Extjs 讓combobox寫起來更簡單

也已經寫了很久時間的extjs ，每次都用到很多的combobox，配置很多東西覺得實在是太麻煩，所以根據常用到的情況寫了一個簡便的combobox，再次記錄下來，以免放在某個地方忘記了找不到了。

定義一個基本的baseCombobox類，如下。

 1 Ext.define('Admin.view.baseCmp.BaseCombobox', {
 2     extend: 'Ext.form.field.ComboBox',
 3     xtype: 'baseCombobox',
 4     editable: false,
 5     labelSeparator: ':',
 6     labelWdith: 0,
 7     triggerAction: 'all',
 8     labelAlign: 'right',
 9     //forceSelection: true,此屬性操作時，就算去掉文字後，失去焦點後還是會選擇上一次選擇的記錄
10     autoSelect: true,
11     selectOnfocus: true,
12     valueNotFoundText: '',
13     name:'',
14     queryMode: 'local',
15     url:'',
16     displayField: '',
17     valueField: '',
18     requires:['Admin.view.baseCmp.BaseComboboxController'],
19     controller: 'baseComboboxController',
20     emptyIndex:-1,//自定義屬性,空值所在下標，-1則不添加
21     selectIndex:0,//自定義屬性，自動選擇下標
22     params:null,//自定義屬性，數據參數
23     listeners: {
24         render: 'getComboData',
25         scope: 'controller'
26     },
27 });

 1 Ext.define('Admin.view.baseCmp.BaseComboboxController', {
 2     extend: 'Ext.app.ViewController',
 3     alias: 'controller.baseComboboxController',
 4     getComboData: function (combo) {
 5         Ext.Ajax.request({
 6             url: combo.url,
 7             method :'POST',
 8             params:combo.params,
 9             success: function (response) {
10                 var dataJson = Ext.decode(response.responseText);
11                 if(dataJson.state != 200 || dataJson.data == null || dataJson.data.length == 0)
12                 {
13                     //服務器返回錯誤
14                     return ;
15                 }
16                 var data = dataJson.data;
17                 //插入“全部”選項
18                 if(combo.emptyIndex >= 0)
19                 {
20                     var emp = {};
21                     emp[combo.displayField] = "全部";
22                     emp[combo.valueField] = "全部";
23                     Ext.Array.insert(data,combo.emptyIndex,[emp]);
24                 }
25                 var store = Ext.create('Ext.data.Store', {
26                     fields: Ext.Object.getKeys(data[0]),
27                     data: data
28                 });
29 
30                 combo.setStore(store);
31                 //如果指定選中某個值
32                 if(combo.selectValue != null)
33                 {
34                     combo.select(combo.selectValue);
35                 }
36                 else
37                 {
38                     //如果指定選中某個下標的值，-1爲最後一個，> 0 則爲第selectIndex個
39                     if(combo.selectIndex == -1)
40                     {
41                         console.log(data.length - 1);
42                         combo.select(data[data.length - 1][combo.valueField]);
43                     }
44                     else
45                     {
46                         combo.select(data[combo.selectIndex][combo.valueField]);
47                     }
48 
49                 }
50 
51                 //觸發選中事件
52                 //combo.fireEvent('select', combo,store.getAt(combo.selectIndex));
53             },
54             failure: function (response) {
55                 //請求服務器失敗
56             }
57         });
58 
59     }
60 });

調用實例：

 1 {
 2                 xtype: 'baseCombobox',
 3                 name: "typeName",
 4                 fieldLabel: "類型",
 5                 displayField: 'typeName',
 6                 valueField: 'id',
 7                 emptyIndex:0,
 8                 multiSelect:false,
 9                 url:"/itemType/list",
10                 listeners:{
11                     select:'query'
12                 }
13 },

這樣大大方便了我使用combobox，如果某種類型的combobox需要重複使用，建議還是直接定義好他，到需要用的時候一句

 xtype: 'itemTypeCombobox',就可以搞定了，代碼看起來簡潔又漂亮。