ExtJs网格面板store：在加载/重新加载后保持滚动条位置

Question

我正在使用Sencha ExtJs 4.0.2a中的grid.Panel，并且每60秒重新加载一个Json Store。

我想知道是否有一种方法可以在数据加载后保留滚动条的位置。
这样用户就可以继续查看他之前浏览的记录。

我使用任务重新加载网格中的数据:

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);

在数据加载后，滚动条位置会被重置到顶部。

问题: 有没有办法在数据加载后保持滚动条位置不变？

提前感谢！

- zerologiko

Answer 1

试试这个东西来保留刷新时的滚动位置：

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

我在我的树形视图上使用这个方法很有效。

viewConfig: {
   preserveScrollOnRefresh: true
}

- dbrin

---

好主意@dbrin，你可以使用viewConfig（因为你正在使用gridpanel）conf来设置viewConfig：{preserveScrollOnRefresh:true}以保留表格的滚动位置。 - Enrique Acevedo

非常感谢！我会尽快尝试（我需要将我的ExtJS 4.0.2a升级到4.1版本）。 - zerologiko

Answer 2

以下是如何在 Grid 中使用 preserveScrollOnRefresh：

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

    extend: 'Ext.grid.Panel',

    viewConfig: {
        preserveScrollOnRefresh: true
    }

这是一个演示这个问题的JSFiddle： http://jsfiddle.net/cdbm6r0o/7/ 然而，当您选择一行时，它似乎并不完全正确。我不确定这是否是一个错误。

'refresh'事件从这段代码中触发：

grid.store.loadData(dataToLoad);

我不知道还有哪些事件会触发“刷新”。

附加说明：

• 我在 Ext.toolbar.Paging 中使用了 require。即使我没有使用它，当我选择一个或多个行时，它也会破坏滚动保留，因此请确保从您的 require 中删除 Paging。
• 如果我同时在表格上使用 bufferedrenderer 插件，则滚动保留似乎无法工作。
• tablePanel.getView().focusRow(recrow) 也是值得关注的，但与 bufferedrenderer 一起使用也无法工作。

- Oliver Watkins

Answer 3

您可以使用preserveScrollOnReload视图配置属性：

viewConfig: {
    preserveScrollOnReload: true
},

- kiran

---

请注意：如果您使用grid.store.load()方法，preserveScrollOnReload将不起作用！但是，使用grid.store.reload()方法可以保存网格位置。 - Sergey Bogdanov