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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 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 已经成熟
2006/12/04 PHP
在WordPress中使用wp_count_posts函数来统计文章数量
2016/01/05 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
django的autoreload机制实现
2020/06/03 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
大学生专业个人学习的自我评价
2013/10/26 职场文书
大学毕业寄语大全
2014/04/10 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers