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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
巧用canvas
Jan 21 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
如何在PHP中使用数组
2020/06/09 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Scrapy的简单使用教程
2017/10/24 Python
查看django版本的方法分享
2018/05/14 Python
Python模块的加载讲解
2019/01/15 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Django实现随机图形验证码的示例
2020/10/15 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
毕业生简历自我评价范文
2014/04/09 职场文书
安全协议书
2014/04/23 职场文书
个人授权委托书格式
2014/08/30 职场文书
中学生打架检讨书
2014/10/13 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Python内置的数据类型及使用方法
2022/04/13 Python