Extjs让combobox写起来简洁又漂亮

2019-11-19 18:08:03

字体：大中小

来源：转载

供稿：网友

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Node.js中文件操作模块File System的详细介绍

下一篇：JS实现给对象动态添加属性的方法