ExtJS4自动生成grid列显示隐藏复选框

在ExtJS 4实际开发中，Grid Panel自带的列表菜单虽然能控制列的显示与隐藏，但很多业务场景需要更直观的操作方式——例如在查询面板中直接勾选字段，一目了然。本文将详细介绍如何利用CheckboxGroup实现这一功能，让用户像勾选菜单一样，动态控制表格列的显隐。

先看效果图：

前期我们已经实现了普通查询与高级查询功能，查询完成后能够获取后台返回的fields（字段）和columns（列）信息。下一步需要将这些列配置传递给自定义函数 makeCustomMadePanel，由其自动生成一个CheckboxGroup。每个checkbox对应一列，勾选即显示该列，取消勾选则隐藏该列。

关键难点在于：CheckboxGroup中每个checkbox需要绑定对应列的引用。经过查阅API文档发现，checkbox并没有专属的“check”事件，只有 change 事件可用。因此我们使用该事件，监听其值变化，通过 grid_a.columnManager.headerCt.items.get(th.itemId) 获取列对象，并调用 setVisible 方法实现显隐切换。值得注意的是，这种获取列引用的方式在官方文档中并不常见，最终在StackOverflow上找到（原帖链接），经测试可用，省去了为每列单独设置id的繁琐步骤。

下面是第一版实现：

复制代码 代码如下:

function makeCustomMadePanel(fields,cl) { var x = 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); } } } }); } }

对应的CheckboxGroup容器定义：

复制代码 代码如下:

Ext.define('customMadePanel', { extend : 'Ext.form.Panel', title : '定制字段', collapsible : true, items : [{ itemId : 'custom', xtype : 'checkboxgroup', fieldLabel : '选择字段', columns : 6, items : [] }] }); var cusMadePanel = new customMadePanel();

第一版运行正常，但性能问题很快暴露：38个checkbox，每次循环逐个 add，加载耗时长达数秒。用户难以接受如此长的等待。而且当前设计每次查询后都重新生成，代价更高。

因此需要优化。优化思路非常直接：先在一个数组中组装好所有checkbox配置对象，最后一次性调用 x.add(fie)。实践证明，一次add的开销远小于多次add，性能提升极为显著。优化后的代码如下：

复制代码 代码如下:

function makeCustomMadePanel(fields,cl) { var x = cusMadePanel.getComponent('custom'); var fie = []; for(var i = 0; i < fields.length; i++) { var temp = { xtype : 'checkboxfield', boxLabel : cl[i].header, 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); } } } }; fie.push(temp); } x.add(fie); // 一次性添加 }

该方案的核心优势在于：列信息完全由后台提供，无论后台传来的表结构如何变化，都能自动适配并动态生成CheckboxGroup。若后续需要进一步优化，可考虑缓存CheckboxGroup的配置，仅当字段发生变化时才重新生成，避免每次查询都重建带来的开销。