View Full Version : Save scroll state after json store load

10 Jul 2012, 2:48 AM
Hey guys,

I have a grid which is populated by a JSON store. I'm saving records to the store so everytime I save the store is loaded. The problem with this if I'm at the very bottom of the grid and then save, the store loads and sets the scroller back to the top. I want the scroller to remain where it last was.

My fix for this so far is :

//before save


//after save

Another way I could do it is:

//before save
var x = grid.getView().el.getScroll().top;


//after save
grid.getView().el.scrollTo("top", x);

These both scroll the grid down to where it last was. The problem is that the scroller physically remains in the same position. Is there anyway to actually move the scroller?


10 Jul 2012, 4:12 AM

you may do the following while loading of your store:-

var scrollPosition = yourGrid.getEl().down('.x-grid-view').getScroll();
yourGrid.getStore().load( function() {
yourGrid.getEl().down('.x-grid-view').scrollTo('top', scrollPosition.top, false);

10 Jul 2012, 5:35 AM
Also take a look at the Grid View config option preserveScrollOnRefresh (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.grid.View-cfg-preserveScrollOnRefresh).

10 Jul 2012, 8:26 AM
I only want to do this when the save function is ran not everytime the store refreshes. It uses pagination so you can click refresh or go to the next and previous page. This will refresh the store and I don't want the scroller to refresh.

@sword-it Your solution works. But like my solution the scroller physically doesn't move. As in the vertical scroller stays in the same position but the page is scrolled down.

11 Jul 2012, 12:28 AM
I actually got it working. Found this thread online and thought it was helpful.


Now the store is loading asynchronous which means that the store finishes loading after the scroll has been reset. I have to try to get the store to load asynchronous now.

Thanks for the help guys.

5 Jun 2013, 4:27 AM
Hello everyone,

I have been facing an issue to preserve the scroll position of the window, each time my store reloads. Although making use of custom code, I am successfully able to maintain the scroll position of the window. It can be done in few simple steps.

Before making callout to your server side code (In my case it is there), maintain the current scroll position of the window in a variable.
Once the processing is performed at the server side and data is received through the server's response, the store reloads. At this stage the scroll position moves to top of the window.
Now, set back the scroll position of the window, that you saved in step 1.

This works absolutely fine. But now, there is one more weird thing that I have noticed during the execution my application.

In my UI, there are few comboboxes and textfields, that are mandatory and for which the appropriate error message is being displayed (The traditional red line and bubble). As soon as I select any value in the dropdown or I enter even a single character in textbox, the window immediately moves to the top of the screen.

I anticipate some good solution/workaround for this.

Thank in advance