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 相关文章推荐
jquery 按键盘上的enter事件
May 11 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
小程序表单认证布局及验证详解
Jun 19 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实现定时任务的五种方法
2016/07/25 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
php实现文件预览功能
2017/05/23 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
python list使用示例 list中找连续的数字
2014/01/27 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
python实现坦克大战游戏 附详细注释
2020/03/27 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014年工程工作总结
2014/11/25 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python
Python代码风格与编程习惯重要吗?
2021/06/03 Python