CODEWITHSUNDEEP
extjs
coolbuddy
coolbuddy

Reputation: 25

Creating checkboxgroup from extjs store

I want to create checkbox group from store populated from an array. Here is my store.

var checklistStore = new Ext.data.Store({
        data: arraySubT,
        fields: ['id', 'boxLabel']
    });

and currently my checkbox group in only getting displayed from an array and not store.

                            xtype: 'checkboxgroup',
                            fieldLabel: 'Checklist',
                            columns: 1,
                            vertical: true,
                            listeners: {
                                change: function(field, newValue, oldValue, eOpts){

                                }
                            },
                            items: checkboxconfigs

However I want to make it displayed from store.How can I achieve this?

Upvotes: 0

Views: 2068

Answers (2)

Sergey Novikov
Sergey Novikov

Reputation: 4196

Here is working fiddle for you.

Just loop through store data with Ext.data.Store.each() method and setup your checkbox group items.

var _checboxGroupUpdated = function() {
    // Use whatever selector you want
    var myCheckboxGroup = Ext.ComponentQuery.query('panel checkboxgroup')[0];

    myCheckboxGroup.removeAll();
    myStore.each(function(record) {
        myCheckboxGroup.add({
            boxLabel: record.get('fieldLabel'),
            inputValue: record.get('value'),
            name: 'myGroup'
        });
    });
}

// Add all listeners you need here
myStore.on({
    load: _checboxGroupUpdated,
    update: _checboxGroupUpdated,
    datachanged: _checboxGroupUpdated
    // etc
});

Upvotes: 1

Alexander
Alexander

Reputation: 20244

[EDIT]
For your and my convenience, I made a general component which you can use. It may need some tuning regarding the store events that it reacts to. Find it in this fiddle.
[/EDIT]

You have to do it manually:

renderCheckboxes:function() {
    checkboxgroup.removeAll();
    checkboxgroup.add(
        checklistStore.getRange().map(function(storeItem) {
            return {
               // map the storeItem to a valid checkbox config
            }
        })
    );
}

and repeat that over and over and over again when the store data changes. That is, you have to attach to the store events:

checklistStore.on({
    load:renderCheckboxes,
    update:renderCheckboxes,
    datachanged:renderCheckboxes,
    filterchange:renderCheckboxes,
    ...
})

Maybe you will overlook some events you have to attach to, but sooner or later you will have all edge cases covered.

Upvotes: 1

Related Questions