Extjs让combobox写起来简洁又漂亮


Posted in Javascript onJanuary 05, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
JS实现给对象动态添加属性的方法
Jan 05 #Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 #Javascript
JavaScript实现数组降维详解
Jan 05 #Javascript
jQuery解析返回的xml和json方法详解
Jan 05 #Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 #Javascript
jQuery实现动态文字搜索功能
Jan 05 #Javascript
JS实现HTML标签转义及反转义
Apr 14 #Javascript
You might like
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
一个PHP分页类的代码
2011/05/18 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
Firefox outerHTML实现代码
2009/06/04 Javascript
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python中存取文件的4种不同操作
2018/07/02 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python高级property属性用法实例分析
2019/11/19 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
golang slice元素去重操作
2021/04/30 Golang
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏