Extjs 让combobox写起来更简单

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