也已经写了很久时间的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',就可以搞定了，代码看起来简洁又漂亮。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。


来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！