Ext JS 4.2.1 - grid with paging - checkbox state lost

Question

I have an ExtJS grid that has a PagingToolbar for (remote) paging, and a checkbox column defined as:

{
    dataIndex : 'selected',
    xtype: 'checkcolumn',
    width : 60                      
}

However, if I check a box and then page forwards and backwards, the checkbox state is not saved - all the checkboxes are unchecked.

I guess since the store only contains data for the current page (from the server), I need some way of storing the state for rows that are not in the current page of data, and then reinstating the checkboxes when I return to that page.

Is there a best practice, or example of storing the checkbox state in the store while paging?

Answer 1

Well, that's so low-level work that no one has yet thought to make a "best practice" for it. Eg

beforeload:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        store.checkedItems[item.get("Id")] = item.get("selected");
    });
},
load:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        item.set("selected",store.checkedItems[item.get("Id")]);
    });
}

or

beforeload:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        store.checkedItems[item.get("Id")] = {selected: item.get("selected") }; // extensible if you want to keep more than one checkbox...
    });
},
load:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        item.set(store.checkedItems[item.get("Id")]);
    });
}