CODEWITHSUNDEEP
javascriptextjsgridupdatesmultiple-records
darkdante
darkdante

Reputation: 707

Sencha Extjs - How to update a grid by setting data in records all at once?

I have a grid with more than 1000 rows (users) and a checkcolumn, which is used to link every user to another specific instance (a group of users for example). I've implemented a "Select All" button, which does this:

   var items = view.store.data.items;
    var dataIndex = 'dataIndexOfCheckColumn';
    var check = true;
    //view.store.suspendEvents();
    for (var i = 0; i < items.length; i++)
    {
        var record = view.store.getAt(i),
        record.set(dataIndex, check);
        this.fireEvent('checkchange', this, i, check, record);
    }
    //view.store.resumeEvents();

The problem with this approach is that every 'set' of record fires some events (validate, unjoin, etc.. ) and for 1000 records is too much. Chrome does that in almost one second, but IE (9,10) is a pain in the '...' --> almost 2 minutes.

Is there another way to do this? I'm thinkig about suspending events on the store, then resuming them and sync store with the grid, but I didn't find in docs how to achieve something like this.

I am using ExtJs version 4.0.1

Upvotes: 3

Views: 7388

Answers (1)

darkdante
darkdante

Reputation: 707

I managed to solve this by suspending and resuming the events, then refresh the view. In case someone needs this:

var items = view.store.data.items
    var dataIndex = 'dataIndexOfCheckColumn';
    var check = true;
    /*suspend events to block firing the events on setting record values
    then resume and refresh the view
    */
    view.store.suspendEvents();
            for (var i = 0; i < items.length; i++)
            {
                var record = view.store.getAt(i);
                record.set(dataIndex, check);
                this.fireEvent('checkchange', this, i, check, record);
            }
            view.store.resumeEvents();
            view.getView().refresh();

Upvotes: 4

Related Questions