【翻译】从Store生成Checkbox Group
最后更新于：2022-04-01 07:23:28
原文：[Ext JS: Generating a Checkbox Group from a Store](https://druckit.wordpress.com/2015/02/12/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);
}
}
});
~~~
测试地址：
[https://fiddle.sencha.com/#fiddle/i51](https://fiddle.sencha.com/#fiddle/i51)