Search code examples
extjsgridrefreshrowselection

remember after refresh selected row in extjs grid


I have a problem. I use extjs grid. This grid will be refreshed every seconds.

I refresh with this function:

ND.refresh = function() {
    ND.commList.load();
}


var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);

But when someone selected a row to highlight it it reset this selection. How can I remember the selected row and highlight it again after refresh?

This is my grid:

var grid = Ext.create('Ext.grid.Panel', {
     autoscroll: true,
     region: 'center',
     store: ND.dashBoardDataStore,
     stateful: true,
     forceFit: true,
     loadMask: false,
     stateId: 'stateGrid',

     viewConfig: {
         stripeRows: true
     },
     columns: [{
         text: 'Vehicle',
         sortable: true,
         flexible: 1,
         width: 60,
         dataIndex: 'vehicle'
     }, {
         text: 'CCU',
         sortable: true,
         flexible: 0,
         width: 50,
         renderer: status,
         dataIndex: 'ccuStatus'
     }]
 });

Thanks guys


Solution

  • I wrote simple Ext.grid.Panel extension that automatically selects back rows that were selected before store reload. You can try it in this jsFiddle

    Ext.define('PersistantSelectionGridPanel', {
        extend: 'Ext.grid.Panel',
        selectedRecords: [],
        initComponent: function() {
            this.callParent(arguments);
    
            this.getStore().on('beforeload', this.rememberSelection, this);
            this.getView().on('refresh', this.refreshSelection, this);
        },
        rememberSelection: function(selModel, selectedRecords) {
            if (!this.rendered || Ext.isEmpty(this.el)) {
                return;
            }
    
            this.selectedRecords = this.getSelectionModel().getSelection();
            this.getView().saveScrollState();
        },
        refreshSelection: function() {
            if (0 >= this.selectedRecords.length) {
                return;
            }
    
            var newRecordsToSelect = [];
            for (var i = 0; i < this.selectedRecords.length; i++) {
                record = this.getStore().getById(this.selectedRecords[i].getId());
                if (!Ext.isEmpty(record)) {
                    newRecordsToSelect.push(record);
                }
            }
    
            this.getSelectionModel().select(newRecordsToSelect);
            Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
        }
    });