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中eval函数的使用方法与示例
Apr 09 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
js自定义回调函数
Dec 13 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
Windows安装Node.js报错:2503、2502的解决方法
Oct 25 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
详解vue 数组和对象渲染问题
Sep 21 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 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中instanceof 与 is_a()区别分析
2015/03/03 PHP
php单例模式实现方法分析
2015/03/14 PHP
Yii使用技巧大汇总
2015/12/29 PHP
javascript document.images实例
2008/05/27 Javascript
js获取图片大小的函数代码
2011/09/20 Javascript
JS分页控件 可用于无刷新分页
2013/07/23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
三个python爬虫项目实例代码
2019/12/28 Python
logging level级别介绍
2020/02/21 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
法律专业应届生自荐信范文
2014/01/06 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
公路施工安全责任书
2015/05/08 职场文书
入党积极分子群众意见
2015/06/01 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
2016年寒假见闻
2015/10/10 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
python实现的人脸识别打卡系统
2021/05/08 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs