原文：[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)