Extjs 让combobox写起来更简单

Posted 2020-08-26 鱼草野

也已经写了很久时间的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‘,就可以搞定了，代码看起来简洁又漂亮。