【翻译】从Store生成Checkbox Group

来源：互联网发布：炫浪网络不能在线阅读编辑：程序博客网时间：2024/06/09 15:36

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

0 0