首页 > 代码库 > Extjs 让combobox写起来更简单
Extjs 让combobox写起来更简单
也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了。
定义一个基本的baseCombobox类,如下。
1 Ext.define(‘Admin.view.baseCmp.BaseCombobox‘, { 2 extend: ‘Ext.form.field.ComboBox‘, 3 xtype: ‘baseCombobox‘, 4 editable: false, 5 labelSeparator: ‘:‘, 6 labelWdith: 0, 7 triggerAction: ‘all‘, 8 labelAlign: ‘right‘, 9 //forceSelection: true,此属性操作时,就算去掉文字后,失去焦点后还是会选择上一次选择的记录 10 autoSelect: true, 11 selectOnfocus: true, 12 valueNotFoundText: ‘‘, 13 name:‘‘, 14 queryMode: ‘local‘, 15 url:‘‘, 16 displayField: ‘‘, 17 valueField: ‘‘, 18 requires:[‘Admin.view.baseCmp.BaseComboboxController‘], 19 controller: ‘baseComboboxController‘, 20 emptyIndex:-1,//自定义属性,空值所在下标,-1则不添加 21 selectIndex:0,//自定义属性,自动选择下标 22 params:null,//自定义属性,数据参数 23 listeners: { 24 render: ‘getComboData‘, 25 scope: ‘controller‘ 26 }, 27 });
1 Ext.define(‘Admin.view.baseCmp.BaseComboboxController‘, { 2 extend: ‘Ext.app.ViewController‘, 3 alias: ‘controller.baseComboboxController‘, 4 getComboData: function (combo) { 5 Ext.Ajax.request({ 6 url: combo.url, 7 method :‘POST‘, 8 params:combo.params, 9 success: function (response) { 10 var dataJson = Ext.decode(response.responseText); 11 if(dataJson.state != 200 || dataJson.data =http://www.mamicode.com/= null || dataJson.data.length == 0) 12 { 13 //服务器返回错误 14 return ; 15 } 16 var data =http://www.mamicode.com/ dataJson.data; 17 //插入“全部”选项 18 if(combo.emptyIndex >= 0) 19 { 20 var emp = {}; 21 emp[combo.displayField] = "全部"; 22 emp[combo.valueField] = "全部"; 23 Ext.Array.insert(data,combo.emptyIndex,[emp]); 24 } 25 var store = Ext.create(‘Ext.data.Store‘, { 26 fields: Ext.Object.getKeys(data[0]), 27 data: data 28 }); 29 30 combo.setStore(store); 31 //如果指定选中某个值 32 if(combo.selectValue != null) 33 { 34 combo.select(combo.selectValue); 35 } 36 else 37 { 38 //如果指定选中某个下标的值,-1为最后一个,> 0 则为第selectIndex个 39 if(combo.selectIndex == -1) 40 { 41 console.log(data.length - 1); 42 combo.select(data[data.length - 1][combo.valueField]); 43 } 44 else 45 { 46 combo.select(data[combo.selectIndex][combo.valueField]); 47 } 48 49 } 50 51 //触发选中事件 52 //combo.fireEvent(‘select‘, combo,store.getAt(combo.selectIndex)); 53 }, 54 failure: function (response) { 55 //请求服务器失败 56 } 57 }); 58 59 } 60 });
调用实例:
1 { 2 xtype: ‘baseCombobox‘, 3 name: "typeName", 4 fieldLabel: "类型", 5 displayField: ‘typeName‘, 6 valueField: ‘id‘, 7 emptyIndex:0, 8 multiSelect:false, 9 url:"/itemType/list", 10 listeners:{ 11 select:‘query‘ 12 } 13 },
这样大大方便了我使用combobox,如果某种类型的combobox需要重复使用,建议还是直接定义好他,到需要用的时候一句
xtype: ‘itemTypeCombobox‘,就可以搞定了,代码看起来简洁又漂亮。
Extjs 让combobox写起来更简单
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。