ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox


Posted in Javascript onMay 02, 2014

由于某种原因,需要做一个控制grid列显示的checkboxgroup,虽然EXTJS4中的gridpanel自带列表可以来控制列的显示隐藏,但是有这样的需求(需要一目了然)

下面先上图

ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox 

接着前几天做的工作,今天上午完成了定制字段,思路是在上面的普通查询或者高级查询结束以后,获得了列的fields,columns等信息,然后交给一个处理函数 makeCustomMadePanel,该函数用来生成checkboxgroup,生成的时候给它加上一个事件,原本以为checkbox会有类似于check的事件,结果API看了看貌似只有个change事件可以用,MD。。

下面贴下自己写的 makeCustomMadePanel函数。。用来根据grid的列自动生成checkboxgroup(整个grid的标头内容等信息均从后台得到,不管后台发来一个什么表,都能生成一个checkboxgroup来控制列的隐藏显示)

参数分别是gridpanel在reconfigure的时候用到的fields和columns,期中的var t=grid_a.columnManager.headerCt.items.get(th.itemId);是关键。。这句用来获得grid_a的列信息。。貌似在api中查不到。网上找了几中方法都不适合。又不想给每个列一个ID。这是在stackoverflow.com/上找到的。。http://stackoverflow.com/questions/20791685/extjs-4-how-do-i-hide-show-grid-columns-on-the-fly

function makeCustomMadePanel(fields,cl) 
{ var x=cusMadePanel.getComponent('custom'); 
//console.log(cusMadePanel.getComponent('custom')); 
for(var i=0;i<fields.length;i++) 
{ 
x.add( 
{ 
xtype : 'checkboxfield', 
boxLabel : cl[i].header, 
inputValue : fields[i].name, 
checked:true, 
itemId:i, 
name : 'custom', 
listeners : { 
change : function(th, value, oldValue,eop) { 
var t=grid_a.columnManager.headerCt.items.get(th.itemId); 
if(t.isVisible()){ 
t.setVisible(false); 
} 
else{ 
t.setVisible(true); 
} 
//grid_a.columns[3].setVisible(false); 
}} 
} 
); 
} 
}

在给出customMadePanel
Ext.define('customMadePanel', { 
extend : 'Ext.form.Panel', 
title : '定制字段', 
collapsible : true, 
items : [ { 
itemId:'custom', xtype : 'checkboxgroup', 
fieldLabel : '选择字段', 
columns : 6, 
items : [] 

}] 
//collapsed:true, 
}); 
var cusMadePanel=new customMadePanel();

我这种做法的不足也很明显,makeCustomMadePanel函数中的循环生成checkbox组件太耗时了,38个组件足足花了好几秒。。用户体验肯定不好。。

并且目前是在每次查询完之后都根据查询的结果生成一遍。。。我再想想好的解决办法

今天对makeCustomMadePanel做了优化,生成组件的速度与先前相比提升非常明显!

function makeCustomMadePanel(fields,cl) cusMade=1; 
var x=cusMadePanel.getComponent('custom'); 
//console.log(cusMadePanel.getComponent('custom')); 
var fie=[]; 
for(var i=0;i<fields.length;i++) 
{ 
//x.add( 
var temp= 
{ 
xtype : 'checkboxfield', 
boxLabel : cl[i].header, 
//inputValue : fields[i].name, 
checked:true, 
itemId:i, 
name : 'custom', 
listeners : { 
change : function(th, value, oldValue,eop) { 
var t=grid_a.columnManager.headerCt.items.get(th.itemId); 
//console.log(t.isVisible()); 
//console.log('break'); 
if(t.isVisible()){ 
t.setVisible(false); 
} 
else{ 
t.setVisible(true); 
} 
//console.log(t.isVisible()); 
//var t1=grid_a.columnManager.headerCt.items.get(th.itemId); 
//console.log(t1); 
//grid_a.columns[3].setVisible(false); 
}} 
}; 
//console.log(temp); 
fie.push(temp); 
} 
//console.log(fie); 
x.add(fie);

思路就是先循环组好需要生成的组件对象,然后一次add,每一次add的开销非常大,变为一次速度真的提升了很多很多~
Javascript 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
js实现有趣的倒计时效果
Jan 19 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 #Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 #Javascript
用json方式实现在 js 中建立一个map
May 02 #Javascript
jquery操作checkbox实现全选和取消全选
May 02 #Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 #Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 #Javascript
jquery等待效果示例
May 01 #Javascript
You might like
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
PHP 引用文件技巧
2010/03/02 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python3去掉string中的标点符号方法
2019/01/22 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
建筑工程技术应届生自荐信
2013/09/27 职场文书
党章学习思想汇报
2014/01/14 职场文书
小区停车场管理制度
2014/01/27 职场文书
培训主管岗位职责
2014/02/01 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
地陪导游欢迎词
2015/01/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript