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


Posted in Javascript onAugust 14, 2013

Extjs3.0 中的CheckboxGroup默认不能动态添加item。虽然它继承了Ext.form.Field,但是却类似于容器。
CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态添加。

如需要数据动态创建,试着创建整个CheckboxGroup,而不是动态添加item。

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();
Javascript 相关文章推荐
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 #Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 #Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 #Javascript
js中return false(阻止)的用法
Aug 14 #Javascript
JavaScript中window、doucment、body的解释
Aug 14 #Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 #Javascript
js之onload事件的一点使用心得
Aug 14 #Javascript
You might like
给海燕B411配件机起死回生配上件
2021/03/02 无线电
php的memcache类分享(memcache队列)
2014/03/26 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
javascript中神奇的 Date对象小结
2017/10/12 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
vue-router传参用法详解
2019/01/19 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Python中实现的RC4算法
2015/02/14 Python
介绍Python的Django框架中的QuerySets
2015/04/20 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python二进制文件的转译详解
2019/07/03 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
保密协议书范本
2014/04/22 职场文书
效能监察建议书
2014/05/19 职场文书
毕业证明书
2015/06/19 职场文书
春节慰问简报
2015/07/21 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android