I am using Extjs 4.1.3. I have a gridpanel, and one of the rows can cause a modal to be opened. In this modal, a request to the backend can be made such that the grid's data changes a bit. Rows will never be added or deleted this way. But once the modal closes, the main gridpanel needs to be updated to reflect minor column data changes.
grid.getView().refresh() doesn't cut it because the backend data is changing. If we only change data on the front, that function works fine. But there is a backend change being done, which necessitates reloading the store. So we call grid.store.reload(). This is great, the main gridpanel is now updated when the modal closes. Except now when the modal closes, the scrollbar jumps to the top of the page. preserveScrollOnRefresh only applies to a view refresh. It does not apply to a store reload.
I discovered grid.getView().saveScrollState(). Then, we call reload() on the store. Then, in the store's load listener, we do grid.getView().restoreScrollState(). Super; the grid's scroll position is preserved.
However, now I have a funky issue where if I change the sort order on any of the columns, the scrollbar jumps to the top. Before opening and closing the modal for the first time, column sorting on the gridpanel does not change the scrollbar position. After the first time the modal is closed, it now always jumps to the top. So basically, it seems that saving and restoring the scroll state breaks the scroll preservation during grid sorting. They're flagged as private in the docs, so I'm not sure if that has something to do with it.
I have tried all kinds of ways to save the scroll details myself, but, I can't anywhere that it's stored. When I do find anything that seems to be a scrollbar position, it's always left: 0, top: 0, rather than top being > 0.
Ext.define('my.grid') {
extend: 'Ext.grid.Panel',
restoreScroll: false,
initComponent: function() {
var me = this;
me.store = Ext.create('store.mystore', {
storeId: 'mystore',
remoteSort: true,
listeners: {
load: function() {
if (me.restoreScroll) {
//if i don't set this to false, the grid's scroll always
//resets to what it was when the modal was last closed.
me.restoreScroll = false;
me.getView().restoreScrollState();
}
}
}
});
},
reloadGrid: function() {
//this is called from the controller through
//an event that fires when the modal is closed
var me = this;
me.getView().saveScrollState();
me.restoreScroll: true;
me.store.reload();
}
}
- Is there a better way to preserve the grid's scrollbar position when the store is reloaded? Not the view refreshed, but the store reloaded. Rows will not be added or deleted.
- If not, can I least not break the innate scrollbar position preservation when the rows are sorted via click the column headers? It seems to work by default, but the whole save/restore scrollbarState breaks it.