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操作文本框readOnly
May 15 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
JQuery学习总结【一】
Dec 01 Javascript
很棒的vue弹窗组件
May 24 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
微信小程序 Storage更新详解
Jul 16 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 和 COM
2006/10/09 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
django中的setting最佳配置小结
2017/11/21 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
经济系大学生求职信
2013/10/01 职场文书
刑事代理授权委托书
2014/09/17 职场文书
客房服务员岗位职责
2015/02/09 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
Win11软件图标固定到任务栏
2022/04/19 数码科技