ExtJs grid.Panel store: keep scrollbar position after load/reload

Question

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.

I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..

I reload the data in the grid using a Task:

var task = {
    run: function(){
        Ext.getCmp(panelGridId).getStore().load({
            //Callback function after loaded records
            callback: function(records) {
                //Hide grid if empty records
                if (Ext.isEmpty(records)) {
                    Ext.getCmp(panelGridId).setVisible(false);
                }
                else {
                    if (Ext.getCmp(panelGridId).isHidden()) {
                        Ext.getCmp(panelGridId).setVisible(true);
                        Ext.getCmp(panelGridId).doComponentLayout();
                    }
                }
            }
        });
    },
    interval: 60000 //60 seconds
};

Ext.TaskManager.start(task);

After the data load the scrollbar position is reset to the top..

Q: Is there a way to maintain the scrollbar position after the data load?

Thanks in advance!

Answer 1

Try this bad boy to preserve scroll position on refresh:

http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh

This works for me on my tree view.

viewConfig: {
   preserveScrollOnRefresh: true
}

Answer 2

Here's how you would use preserveScrollOnRefresh in your Grid :

Ext.define('js.grid.MyGrid', {

    extend: 'Ext.grid.Panel',

    viewConfig: {
        preserveScrollOnRefresh: true
    }

Here's a JSFiddle which demonstrates this :

http://jsfiddle.net/cdbm6r0o/7/

However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.

The 'refresh' event is triggered from this code :

grid.store.loadData(dataToLoad);

I'm unaware of any other events which trigger a 'refresh'

Additional Notes :

• I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
• The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
• tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.