【翻译】从Store生成Checkbox Group
原文:Ext JS: Generating a Checkbox Group from a Store
Ext JS的checkbox group可以用来将复选框组合成一个单一的逻辑字段。由于复选框时不时需要动态的从Store中生成,因而,如果将store绑定到扩展类,就最好不过了。以下是第一次尝试:
Ext.define('Ext.ux.CheckboxStoreGroup', {
extend: 'Ext.form.CheckboxGroup',
alias: 'widget.checkboxstoregroup',
config: {
store: null,
labelField: 'label',
valueField: 'id',
checkedField: 'checked',
columns: 3,
boxFieldName: 'mycheckbox'
},
applyStore: function(store) {
if (Ext.isString(store)) {
return Ext.getStore(store);
} else {
return store;
}
},
updateStore: function(newStore, oldStore) {
if (oldStore) {
store.removeEventListener('datachanged', this.onStoreChange, this)
}
newStore.on('datachanged', this.onStoreChange, this);
},
onStoreChange: function(s) {
Ext.suspendLayouts();
this.removeAll();
var vField = this.getValueField();
var lField = this.getLabelField();
var cField = this.getCheckedField();
var fName = this.getBoxFieldName();
var rec = null;
for (var i=0; i<s.getCount(); i++) {
rec = s.getAt(i);
this.add({
xtype: 'checkbox',
inputValue: rec.get(vField),
boxLabel: rec.get(lField),
checked: rec.get(cField),
name: fName
});
}
Ext.resumeLayouts(true);
},
initComponent: function() {
this.callParent(arguments);
this.on('afterrender', this.onAfterRender);
},
onAfterRender: function() {
if (this.getStore().totalCount) {
this.onStoreChange(this.getStore);
}
}
});
【翻译】从Store生成Checkbox Group的更多相关文章
- ExtJs 3.0 动态生成 CheckBox
在开发过程中,往往需要利用数据动态生成Checkbox.如权限节点.考试答案,调查选项等等.在Extjs中,有两种方法来获取后台数据,一是Ext.Ajax()方法,第二种是利用 Store,store ...
- c#根据后台数据,自动生成checkbox
前端在aspx中,添加生成checkbox的容器div: <div id="container" runat="server"></div&g ...
- C#导出 Excel 时, 生成 CheckBox 控件
在使用 Microsoft.Office.Interop.Excel 组件导出Excel 表格时,要把导出前的 CheckBox 控件一同导出到 excel 表格中,对于这个功能 看似很简单,但 M ...
- React实现checkbox group多组选项和标签组显示的联动
实现功能:勾选checkbox项,确定后,已勾选的checkbox项以tag标签的形式展示,tag标签可快捷删除. 实现过程: 使用React. 使用Ant Design的Checkbox.Tag组件 ...
- 关于 ant Checkbox.Group 数组checked 设置失效问题
最近在频繁使用ant UI框架.在使用到checkbox的时候,需要从后台获取数组显示,然后发现数组设置了checked:true,并不能使多选框处于选中状态,阅读 Checkbox Group 的属 ...
- 浅谈 Checkbox Group 的双向数据绑定
前言 不曾想在忙碌的工作面前,写一篇技术博客也成了奢求. Checkbox 作为表单中最常见的一类元素,使用方式分为单值和多值,其中单值的绑定很简单,就是 true 和 false,但是多值(Chec ...
- 动态生成CheckBox(Winform程序)
在做用户权限设置功能时,需要做一个动态生成权限列表的功能.(笔记.分享) //1.清空权限控件组的默认控件 panelPermissions.Controls.Clear(); _groupBoxLi ...
- [技术翻译]使用Nuxt生成静态网站
本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...
- Create a Group Policy Central Store
一.How to create a Group Policy Central Store You have downloaded or created your own Group Policy Ad ...
随机推荐
- 使用Fiddler改变线上js文件的引用路径
一般的项目开发都是先在本地环境开发,测试环境中完成测试,最后再提交到线上环境. 但是由于版本构建工具有时出现bug或者一些缓存的因素导致测试环境代码可能和线上不一样,这是多么蓝瘦的事情.此处说的是在原 ...
- centos 7 破解密码
CentOS 7 root密码的重置方式和CentOS 6完全不一样,CentOS 7与之前的版本6变化还是比较大的,以进入单用户模式修改root密码为例. 1.重启开机按esc 2.按e ...
- python基础学习(一)
python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum),诞生时间1989年圣诞 一.变量的命令规则 1.变量只能由大小写字母.数字和下划线三部分组成,并且不能以数字 ...
- Mac下安装PEAR
The following instructions install PEAR and PECL on Mac OS X under/usr/local/. PECL is bundled with ...
- MongoDB 原子操作
mongodb不支持事务,所以,在你的项目中应用时,要注意这点.无论什么设计,都不要要求mongodb保证数据的完整性. 但是mongodb提供了许多原子操作,比如文档的保存,修改,删除等,都是原子操 ...
- Android Design Support Library使用详解——Snackbar
Google在2015 I/O大会上,给我们带来了更加详细的Material Design规范,同时也引入了Android Design Support Library,为我们提供了基于Materia ...
- iOS进阶之页面性能优化
转载:http://www.jianshu.com/p/1b5cbf155b31 前言 在软件开发领域里经常能听到这样一句话,"过早的优化是万恶之源",不要过早优化或者过度优化.我 ...
- pandas小记:pandas高级功能
http://blog.csdn.net/pipisorry/article/details/53486777 pandas高级功能:面板数据.字符串方法.分类.可视化. 面板数据 {pandas数据 ...
- Python 2.7 闭包的局限
想法源自:http://stackoverflow.com/questions/141642/what-limitations-have-closures-in-python-compared-to- ...
- android M Launcher之LauncherModel (二)
上一篇我们通过LauncherModel的创建 ,实例化,以及与LauncherModel之间的沟通方式.初步了解了LauncherModel一些功能及用法,如果对LauncherModel一系列初始 ...