Extjs3.0 checkboxGroup 动态添加item实现思路

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，最后加到父容器并刷新布局。

注意事项

关键点就两步：一是构建好 items 数组，二是调用 doLayout。很多新手会在添加后忘记 doLayout，结果界面没有变化，以为是添加失败。记住这个细节，省得走弯路。