Extjs让combobox写起来简洁又漂亮

代码看起来简洁又漂亮是如何做到的，这篇文章主要为大家详细介绍了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',就可以搞定了，代码看起来简洁又漂亮。

以上就是Extjs让combobox写起来简洁又漂亮的详细内容，更多请关注易知道|edz.cc其它相关文章！