How can I preserve the selections in an ExtJS grid with filtered data?

Question

I'm using ExtJS 4.1.2, and I have an Ext.grid.Panel with a check-box selection model and a text-box in the header for filtering the items in the grid:

var nameStore = new Ext.data.Store({
    ...
    proxy: { type: 'ajax' ... },
    fields: [ { name: 'name', type: 'string' }, ... ],
});

var headerBar = new Ext.toolbar.Toolbar({
    xtype: 'toolbar',
    dock: 'top',
    layout: 'fit',
    items: [{
        xtype: 'textfield',
        ...,
        listeners: {
            change: function(fld, newVal, oldVal, opts) {
                var grid = ...;
                if (newVal.length > 0)
                    grid.store.filterBy(function(record, id) { return record.get('name').indexOf(newVal) !== -1; });
                else
                    grid.store.clearFilter()
            }
        }
    }]
});

var nameGrid = new Ext.grid.Panel({
    ...
    selType: 'checkboxmodel',
    selModel: { mode: 'SIMPLE' },
    store: nameStore,
    columns: [ { dataIndex: 'name', flex: true }, ... ],
    dockedItems: [ headerBar ],
    bbar: [ { xtype: 'tbtext', text: '0 items selected' ... },
    listeners: {
        selectionchange: function(selModel, selected, opts) {
            var txt = ...;
            txt.setText(Ext.String.format("{0} items selected", selected.length));
        }
    }
});

As shown nameStore's filter is applied (or removed) based on the value in headerBar's textbox. Also, a text string in the bottom bar is updated as items are selected/deselected.

Each of these features is working smoothly on its own. But the interaction is giving me trouble: if an item is selected and then gets filtered out, it is deselected and then remains so when the filter is cleared.

How can I maintain the selections (or at least appear to do so to the user) of "hidden" items, either for use elsewhere in my application or to reselect when the filter is cleared? Thanks!

Answer 1

you need not to add the selected grid separately. This can be done in one grid only. Simple method is to have an array variable in page scope and capture the grid select event or itemclick event whatever you want.

e.g if you use select event it will give you your record.

select( this, record, index, eOpts )

you can get your record id and push it to the array variable that you declared. Once you filtered out the grid. you can loop through the filtered records and call select method by getting selection model. e.g

grid.getSelectionModel().select(record);

Hope this will help.