Extjs让combobox写起来简洁又漂亮
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
也已经写了很久时间的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学习笔记之五 一个小细节renderTo和applyTo的区别
Extjs的组件有两个看起来类似的配置项,applyTo和renderTo,这两个配置项都是用来指定将该extjs组件加载到什么位置。那他们到底有什么区别呢,网上搜了下,有两篇博文也是关于这个的。2010-01-01ExtJs3.0中Store添加 baseParams 的Bug
今天发现了一个ExtJS3.0中的Bug 以前用2.0的时候,喜欢这样增加参数2010-03-03Extjs中DisplayField的日期或者数字格式化扩展
在用Extjs的时候,有时需要对 Ext.form.DisplyField 进行格式化。2010-09-09关于viewport,Ext.panel和Ext.form.panel的关系
那个深入浅出ext作者比我还懒 viewport存放Ext.panel对象,其容器中的成员可以以borderlayout方式布局2009-05-05Ext JS 4实现带week(星期)的日期选择控件(实战二)
Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的方法,jquery 的扩展组件 等有直接提供这样的一些现成包,感兴趣的朋友可以了解下2013-08-08
最新评论