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

回答1:

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 

回答2:

The straightforward solution is just save somewhere in js index of selected row. Then after reload you could easily select this row by index using grid's selection model.

Get selection model: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel

var selectionModel = grid.getSelectionModel() 

Get selected rows: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

var selection = selectionModel.getSelection() 

Set selected row back: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select

selectionModel.select(selection) 

回答3:

Here is another way to select the previously selected record:

var selectionModel = grid.getSelectionModel()  // get the selected record var selectedRecord = selectionModel.getSelection()[0]  // get the index of the selected record var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);  // select by index grid.getSelectionModel().select(selectedIdx); 

For some reason the grid.getSelectionModel().select(record) method wasn't working for me, but selecting by index seems to work.

Edit: found out why grid.getSelectionModel().select(record) method wasn't working. Apparently the store is reloaded, the record instances aren't the same (they have different automatically generated Ext IDs). You have to use selectAt() in this case.

回答4:

for extjs 4.1.7 users

need a workarround about the statement in

refreshSelection() {

...
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top])

}

thus setScrollTop no longer exists

so a working soluction is add me.getView().preserveScrollOnRefresh = true;

in initComponent

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);          //-------------------------------------------         me.getView().preserveScrollOnRefresh = true;         //-------------------------------------------     },     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 

回答5:

i have make modification on this code. If you make selection, and aplys a filter on the store and reload it, the selection model have a first empty array in this selected collection ( at index 0 ).

This modification is in the last line of the "refreshSelection" function.

if (newRecordsToSelect.length >= 1){         this.getSelectionModel().select(newRecordsToSelect);         Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);     } 

文章来源: remember after refresh selected row in extjs grid