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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
javascript new fun的执行过程
Aug 05 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
js随机生成字母数字组合的字符串 随机动画数字
Sep 02 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
Dec 25 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
Angular中$compile源码分析
Jan 28 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
JS实现简单的表格增删
Jan 16 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
window.location.hash 属性使用说明
2010/03/20 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python程序语言快速上手教程
2012/07/18 Python
python实现通过shelve修改对象实例
2014/09/26 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
python中的代码编码格式转换问题
2015/06/10 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
python读取中文txt文本的方法
2018/04/12 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书