Extjs Combobox简洁美观的写法技巧

时间：2026-06-12 06:54

针对ExtJS中Combobox组件重复配置问题，通过封装BaseCombobox基类及其控制器，预置了数据源、渲染、事件等常用属性及请求逻辑。开发者仅需继承基类并配置少量差异化参数，即可快速构建下拉框，从而简化调用代码，显著提升可读性与维护性。

在ExtJS开发过程中，Combobox下拉选择框几乎是每个管理后台页面的标配组件。坦白说，每次使用都要反复配置displayField、valueField、url、store这些固定参数，重复劳动不仅拖慢效率，代码量增多后也容易出问题。忍无可忍之下，自己动手封装了一个通用基类，既能消除重复配置，又保留了足够的自定义空间。现在记录下来，方便日后查阅。

Extjs让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
    {
     // 否则按 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',

最终代码风格简洁清晰，既提升了可读性，也显著增强了后期维护的便捷性。

来源：https://www.jb51.net/article/102097.htm

extjs