Extjs combobox简洁又漂亮的写法

做 ExtJS 开发的时间一长，就会发现 Combobox 几乎是每个页面都绕不开的组件。说实话，每次写都要反复配置 displayField、valueField、url、store 这些老几样，重复劳动不说，代码量一多还容易出纰漏。实在忍不了，就自己动手封装了一个基础版，既能省去重复配置，又保留了足够的灵活性。写出来记录一下，免得以后自己忘了。

封装一个基础 BaseCombobox 类

先定义一个基础的 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
    {
     // 否则按 selectIndex 选个默认项，-1 表示最后一个
     if(combo.selectIndex == -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'
    }
},

这就把大多数重复配置都藏到了基类里。如果某个业务场景频繁用到某一个特定下拉框（比如"类型"组合框），还可以进一步封装成单独的组件，使用时一行搞定：

xtype: 'itemTypeCombobox',

代码看起来既简洁又漂亮，可读性和维护性都上了一个台阶。