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',就可以搞定了，代码看起来简洁又漂亮。