ExtJS 3.0 CheckboxGroup动态添加选项的实现方法
Extjs3 0 中的 CheckboxGroup 有一个常见陷阱——默认不支持动态添加 item。虽然它继承了 Ext form Field，但其本质更接近于一个容器。 CheckboxGroup 在初始化时通过 items 配置项生成对应的面板，该过程仅执行一次，因此之后无法直接通过 add 方
CheckboxGroup 在初始化时通过 items 配置项生成对应的面板，该过程仅执行一次，因此之后无法直接通过 add 方法动态加入新的 item。
如何解决？思路其实很简单：既然无法动态添加 item，那就重新创建整个 CheckboxGroup，并将新的 items 配置进去。换句话说，先准备好数据，一次性生成完整的 CheckboxGroup 实例，然后将其添加到目标容器中，最后调用 doLayout 刷新布局即可。
以下代码展示了一种典型的实现方式：首先根据数据源循环构建 unitColumns 数组，每个元素对应一组 checkbox 配置（包含 boxLabel、name、inputValue 等属性）；然后新建一个 CheckboxGroup，将 unitColumns 赋值给 items；最后将其添加到父容器并调用 doLayout 刷新布局。
复制代码 代码如下:
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();
关键步骤只有两步：一是构建 items 数组，二是调用 doLayout。许多初学者在添加后常常忘记调用 doLayout，导致界面没有任何变化，误以为添加失败。牢记这个细节，可以避免走弯路。
游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。
同类文章
DCloud平台选型指南 适用场景与核心差异详解
DCloud是一个围绕跨平台开发与流应用构建的技术生态，旨在帮助前端开发者使用Web技术开发高性能移动应用。其核心产品包括集成开发环境HBuilderX和基于Vue js的uni-app框架，支持一套代码发布至iOS、Android、Web及多端小程序。相比ReactNative和Flutter，uni-app在多端覆盖和Vue技术栈学习成本上具有优势，适合
DCloud使用教程与常见问题解决方案详解
DCloud提供跨平台应用开发方案，核心为HBuilderX与uni-app框架。开发者使用Vue js语法编写代码，可编译发布至iOS、Android、Web及小程序等多端。流程涵盖项目创建、开发调试与真机预览。常见问题如设备识别、编译失败等可通过检查设置、查看日志与条件编译解决。应用完成后支持云打包生成安装包。
DCloud新手入门教程 从零开始快速掌握开发技巧
DCloud是一个基于Web技术的跨平台应用开发平台，允许开发者使用HTML5等语言编写代码，并编译为iOS、Android及小程序应用，实现“一次编写，多端发布”。开发需使用HBuilderX，基于Vue js进行页面开发，平台提供丰富组件与API，并支持插件市场扩展功能。
DCloud新手入门指南从零开始了解这个开发平台
DCloud是一个移动应用开发平台，旨在帮助前端开发者使用Web技术高效开发性能接近原生的跨平台应用。其核心产品包括HBuilderX开发环境和基于Vue js的uni-app框架，可实现一次开发、多端发布。平台通过完整工具链和插件生态降低开发门槛，适合需要快速迭代、覆盖多端的应用场景。
Zepto实战项目优化技巧与应用场景详解
Zepto js作为轻量级JavaScript库，专为移动端优化，体积仅约10KB。它支持模块化定制，可按需构建以减小体积。使用时需减少DOM操作、善用事件委托，并可混合原生API提升性能。Zepto能融入现代工程流，但需注意其与jQuery的API差异及兼容性限制，适合在移动端性能优先的场景中替代jQuery。
- 热门数据榜
相关攻略
2026-07-10 06:47
2026-07-10 06:47
2026-07-10 06:47
2026-07-10 06:47
2026-07-10 06:47
2026-07-10 06:46
2026-07-10 06:46
2026-07-10 06:46
热门教程
- 游戏攻略
- 安卓教程
- 苹果教程
- 电脑教程
