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 相关文章推荐
input的focus方法使用
Mar 13 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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 高手之路(二)
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
yii中widget的用法
2014/12/03 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Python入门篇之面向对象
2014/10/20 Python
有关Python的22个编程技巧
2018/08/29 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python如何更新包
2020/06/11 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
String和StringBuffer的区别
2015/08/13 面试题
xxx同志考察材料
2014/02/07 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
活动简报范文
2015/07/22 职场文书
深入理解CSS 中 transform matrix矩阵变换问题
2021/08/30 HTML / CSS
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS