Extjs3.0 checkboxGroup 动态添加item实现思路
作者：技术拾光时间：2026-06-10 08:19:07浏览：475
Extjs3.0 CheckboxGroup 动态添加 item 的常见问题 Extjs3.0 里的 CheckboxGroup 有个小坑——默认不支持动态添加 item。它虽然继承了 Ext.form.Field，可本质上更像一个容器。CheckboxGroup 在配置时通过 items 生成对应
Extjs3.0 CheckboxGroup 动态添加 item 的常见问题
Extjs3.0 里的 CheckboxGroup 有个小坑——默认不支持动态添加 item。它虽然继承了 Ext.form.Field，可本质上更像一个容器。CheckboxGroup 在配置时通过 items 生成对应的面板，这个过程只执行一次，所以后续想往里塞新的 item 几乎行不通，直接调用 add 方法是没用的。解决方案：重新创建 CheckboxGroup
解决思路很简单：既然不能动态添加 item，那就直接把整个 CheckboxGroup 重新创建一遍，再把新的 items 塞进去。换句话说，把数据准备好，一次性生成完整的 CheckboxGroup 实例，然后添加到目标容器里，最后调用 doLayout 刷新布局。代码实现示例
下面这段代码就是典型的实现方式——先根据数据源循环构造 unitColumns 数组，每个元素就是一组 checkbox 配置（boxLabel、name、inputValue 等），然后 new 一个 CheckboxGroup，把 unitColumns 赋给 items，最后加到父容器并刷新布局。复制代码 代码如下:
var unitColumns=[];
for(var i = 0;i < records.length;i++){
unitColumns.push({
boxLabel: records[i].data.A11,
name: records[i].data.A11,
inputValue: records[i].data.A1,
checked: false
});
}
var itemsGroup = new Ext.form.CheckboxGroup({
id:'unitItems',
bodyStyle:'background-color: transparent;margin-top:10px;',
fieldLabel: '选项',
columns: 2,
items: unitColumns
});
Ext.getCmp('OptionsSet').add(itemsGroup);
Ext.getCmp('OptionsSet').doLayout();
for(var i = 0;i < records.length;i++){
unitColumns.push({
boxLabel: records[i].data.A11,
name: records[i].data.A11,
inputValue: records[i].data.A1,
checked: false
});
}
var itemsGroup = new Ext.form.CheckboxGroup({
id:'unitItems',
bodyStyle:'background-color: transparent;margin-top:10px;',
fieldLabel: '选项',
columns: 2,
items: unitColumns
});
Ext.getCmp('OptionsSet').add(itemsGroup);
Ext.getCmp('OptionsSet').doLayout();