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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
Angular中$compile源码分析
Jan 28 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 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
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
addRule在firefox下的兼容写法
2006/11/30 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
计算机专业职业生涯规划范文
2014/01/19 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
无罪辩护词范文
2015/05/21 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
MySQL 逻辑备份 into outfile
2022/05/15 MySQL