javascript ExtJs grid.Panel 存储：加载/重新加载后保持滚动条位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13088506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJs grid.Panel store: keep scrollbar position after load/reload
提问by zerologiko
I'm using grid.Panelin Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
我在 Sencha ExtJs 4.0.2a中使用grid.Panel并且每 60 秒重新加载一个 Json 存储。
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?
数据加载后滚动条位置重置到顶部..
Q:有没有办法在数据加载后保持滚动条位置？
Thanks in advance!
提前致谢！
回答by dbrin
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
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
}
回答by Oliver Watkins
Here's how you would use preserveScrollOnRefreshin your Grid :
以下是在 Grid 中使用preserveScrollOnRefresh的方法：
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
这是一个 JSFiddle，它演示了这一点：
http://jsfiddle.net/cdbm6r0o/7/
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 :
'refresh' 事件由此代码触发：
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
我不知道触发“刷新”的任何其他事件
Additional Notes :
补充笔记 ：
- I had the Ext.toolbar.Pagingas 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 bufferedrendererplugin on the table at the same time.
- tablePanel.getView().focusRow(recrow)is also interesting to look at, but also does not work with bufferedrenderer.
- 我需要Ext.toolbar.Paging。即使我没有使用它，当我选择了一行或多行时，它也搞砸了滚动保留，因此请确保从您的需求中删除分页。
- 如果我同时在桌子上使用bufferedrenderer插件，滚动保留似乎不起作用。
- tablePanel.getView().focusRow(recrow)也很有趣，但也不适用于 bufferedrenderer。
回答by kiran
You can use the preserveScrollOnReloadview config property:
您可以使用preserveScrollOnReload视图配置属性：
viewConfig: {
preserveScrollOnReload: true
},
回答by kiran
You can use preserveScrollOnReload : true in viewConfig
您可以在 viewConfig 中使用 preserveScrollOnReload : true
viewConfig: { preserveScrollOnReload: true },
viewConfig: { preserveScrollOnReload: true },
