View Full Version : Scrollposition of a grid-view after datastore.reload()

24 Feb 2011, 1:41 AM

this is my first post here.

First I would like to thank the whole Sencha staff for this great work. This is the first time, I feel really comfortable with a js-framework.

But soon, I had an issue with the GridPanel. Every time, I reload the datastore of a grid, the view loses it's old scrolling position and jumps to the top.

Finally I found this section (http://www.sencha.com/learn/Ext_FAQ_Grid#Maintain_GridPanel_scroll_position_across_Store_reloads) in the extjs grid faq. This snipped does not directly run in webkit-browsers. You have to add a timeout and call the restore part a little moment later. 100ms helped me out here. This is what I have now:

grid.getView().on('beforerefresh', function(view) {
view.scrollTop = view.scroller.dom.scrollTop;
view.scrollHeight = view.scroller.dom.scrollHeight;

grid.getView().on('refresh', function(view) {
setTimeout(function () {
view.scroller.dom.scrollTop = view.scrollTop + (view.scrollTop == 0 ? 0 : view.scroller.dom.scrollHeight - view.scrollHeight);
}, 100);

Runs in IE8, Chrome9, Firefox3.6
Does not in Opera 11
Dont know what happens in earlyer browser versions or different browsers.

This solution has one drawback: Without activly telling the view not to restore the scroll position, it is also restored if you goto next page by the paginator.

For a better understanding, why I need to restore the scrolling position:
I list about 100 rows per "page" of a datasource, hat has about 10000 rows. A doubleclick on a row opens a modal window to edit the contents of that row. In this case a row is a product. A product can have relations to other products. The first 3 relations (product names) are shown in a separate column, followed by ", (+n)" if there are more relations. After I have made my changes, I press a save-button, which validats and saves the data, closes the window and reloads the datastore, if everything is right. If I change the name of one product, it is common, that this change applies to various other products on the same page.

I think sencha should integrate this "feature" as a option, because from my point of view, it is a deep integration to tell the view of a grid to restore the position, if a store reloads the same position of a datasource and not to do so, if changes to the baseparams are made... or so.


14 Feb 2012, 6:16 AM
thans for this suggestion. I was having the same problem. I tried your solution and it worked fine. The only problem is the "blinking" of the grid right after the refresh, but I think my user can live with it.

2 May 2012, 2:27 PM
I had the same problem. However in my case, I have multiple headers with different color, so the blinking is very obvious and annoying with colored headers moving around.
This problem is caused by mainBody.setInnerHtml(renderRows(0, -1)); in GridView refresh method, this literally sets dom to an empty String. Then the view is being rebuild, and we are back to upper left corner of the view.
The only solution I found is using GridStore update, this updates one row at a time (it basically does a swap, add the new row and remove the old one). Doing update for all the rows will refresh the table without scrolling back to upper left corner.
However another problem comes up, almost all the rows will have value change in my Grid, and updating every row is extremely slow because of the size of my Grid.
I am stuck, did anyone have similar problem and found a solution? Will this be solved in the newer version?