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实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
JavaScript ES6的函数拓展
Jan 18 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
咖啡的化学
2021/03/03 咖啡文化
Zend引擎的发展 [15]
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
img的onload的另类用法
2008/01/10 Javascript
执行iframe中的javascript方法
2008/10/07 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
webpack分离css单独打包的方法
2018/06/12 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python 2.7中文显示与处理方法
2018/07/16 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
QML用PathView实现轮播图
2020/06/03 Python
Python如何读取、写入CSV数据
2020/07/28 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
中专生职业生涯规划书范文
2014/01/10 职场文书
导游词之阆中古城
2019/12/23 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
mysql数据库隔离级别详解
2022/06/16 MySQL
2022年显卡天梯图(6月更新)
2022/06/17 数码科技