ExtJs refresh of infinite scrolling grid panel

Question

I have an infinite scrolling grid panel in my app (ExtJs 4.2.1), similar to this example. The user can click a refresh button, then the rows of the grid must be updated with data from the DB. I call store.load() in the refresh button handler, and my data gets updated. This works nice for the first rows of the grid panel (records from page 1). But it does not work if the user scrolled down the grid. After store.load, the grid resets the scroll position to the top.

I am asking for a solution to reload the store and refresh the grid which keeps the current selection and also the current scroll position. The good thing: I have the global index of each record in the store.

Here is my code, there are thousands of entries in the DB.

Grid panel:

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Panel',
    requires:[ 'Ext.grid.plugin.BufferedRenderer'],
    alias: 'widget.myGrid',
    plugins: 'bufferedrenderer',
    loadMask: true,
    selModel: {
        mode: 'MULTI',
        pruneRemoved: false
    },
    itemSelector: 'div.workspaceItemSelector',
    overItemCls: 'workspaceItemMouseOver',
    trackOver: true,
    autoScroll: true,
    verticalScroller: { variableRowHeight: true },
    defaultSortOrder: 'ASC',

    // and some column definitions ...
});

Store:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    buffered: true,
    pageSize: 100,
    leadingBufferZone: 100,
    remoteSort: true,
    model: 'MyApp.model.MyModel',
    storeId: 'myStore',
    proxy:  {
        type: 'rest',
        url: 'someUrl',
        reader: { type: 'json', totalProperty: 'total', root: 'items' }
    }
});

There is a solution for unbuffered grids, which does not work for me.

Answer 1

On load controller function:

loadStoreFunction : function (grid) {

    var storeGrid = grid.getStore();
    var currentElement = grid.getSelectionModel().getSelection();
    storeGrid.load({
        scope: this,
        callback: function(records, operation, success) {
            grid.getView().focus();
            grid.getSelectionModel().select("index of currentElement"); // last position.
            grid.getSelectionModel().select(storeGrid.getRange().length-1); // last insert
                    storeGrid.loadPage(1+(index/totalCount),options); // Load row's page calculated.
        }
    });

}