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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
纯js实现倒计时功能
Jan 06 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
vue2.x数组劫持原理的实现
Apr 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 不使用js实现页面跳转
2014/02/11 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
javascript常用功能汇总
2015/07/05 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python基本socket通信控制操作示例
2019/01/30 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
Python如何使用神经网络进行简单文本分类
2021/02/25 Python
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
应届生简历中的自我评价
2014/01/13 职场文书
职业女性的职业规划
2014/03/04 职场文书
聚美优品广告词改编
2014/03/14 职场文书
企业元宵节主持词
2014/03/25 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
爱的承诺书
2015/01/20 职场文书
简单的辞职信模板
2015/05/12 职场文书
抢劫罪辩护词
2015/05/21 职场文书