利用ExtJS4的CheckboxGroup可实现Grid列显隐控制。通过监听checkbox的change事件，用itemId获取列对象并调用setVisible切换。优化性能时，先将checkbox配置组装为数组，再一次性添加，避免逐个添加导致的加载延迟。此方案自动适配后台返回的列信息。
ExtJS4自动生成Grid列显隐控制Checkbox
作者：技术拾光
时间：2026-06-11
浏览：310
文章目录
使用CheckboxGroup动态控制ExtJS 4 Grid列显隐
在ExtJS 4的实际开发中，Grid Panel自带的列表菜单确实能控制列的显示隐藏，但有时业务场景需要更直观的操作——比如在查询面板里直接勾选字段，一目了然。今天就来聊聊怎么用CheckboxGroup实现这个功能，让用户能像勾选菜单一样，动态控制表格列的显隐。
先看效果图：
之前的工作已经完成了普通查询和高级查询，查询结束后能拿到后台返回的fields和columns信息。接下来要做的就是把这些列信息传给一个自定义函数 makeCustomMadePanel，让它自动生成一个CheckboxGroup。每个checkbox对应一列，勾选则显示，取消勾选则隐藏。
关键难点在于：CheckboxGroup里每个checkbox需要绑定对应列的引用。查遍了API，发现checkbox没有专门的“check”事件，只有 change 事件可用。那就用它，监听值变化，然后通过 grid_a.columnManager.headerCt.items.get(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的配置，只在字段变化时才重新生成，而不是每次查询都重建。
实用工具推荐
电子包浆
使用 ›绿化、压缩、噪点和虚拟水印，自由调节做旧程度。
图片压缩
使用 ›选择画质和输出格式，预览压缩前后的大小。