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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue实现登录拦截
Jun 29 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python中assert用法实例分析
2015/04/30 Python
简单介绍Python中的round()方法
2015/05/15 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python tkinter canvas使用实例
2019/11/04 Python
PyQt5实现画布小程序
2020/05/30 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
七年级地理教学反思
2014/01/26 职场文书
企业形象策划方案
2014/05/29 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python