» Fig Leaf Software Home

We've Got You Covered.

Friday, February 13, 2015

Ext JS: Generating a Checkbox Group from a Store

Ext JS checkbox groups enable you to group checkboxes into a single logical field. Since these checkboxes are often times dynamically generated from a store, I thought that it might make sense to extend the class with some store binding. Here’s my first, lightly tested attempt:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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);
        }
    }
});
You can test and play around with the code here:
LEARN SENCHA: Teach Yourself Sencha in a Day: http://go.figleaf.com/learn-sencha 

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com