Remember selection after refresh in extjs4 grid
In response to stack overflow question "remember after refresh selected row in extjs grid"
by sbgoran
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
JavaScript
Ext.application({
name: 'HelloExt',
launch: function() {
// Model definition and remote store (used Ext examples data)
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username',
{name: 'replycount', type: 'int'},
{name: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
var store = Ext.create('Ext.data.Store', {
pageSize: 20,
model: 'ForumThread',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.sencha.com/forum/topics-browse-remote.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
}
}
});
// Define grid that will automatically restore its selection after store reload
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) {
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 =...