ExtJs grid.Panel store：加载/重新加载后保持滚动条位置答案

【问题标题】：ExtJs grid.Panel store: keep scrollbar position after load/reloadExtJs grid.Panel store：加载/重新加载后保持滚动条位置
【发布时间】：2012-10-16 19:29:48
【问题描述】：

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

数据加载后，滚动条位置重置为顶部..

问：有没有办法在数据加载后保持滚动条的位置？

提前致谢！

【问题讨论】：

标签： javascript extjs4.1

【解决方案1】：

试试这个坏男孩在刷新时保持滚动位置：

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

这适用于我的树视图。

viewConfig: {
   preserveScrollOnRefresh: true
}

【讨论】：

好主意@dbrin，您可以使用viewConfig（因为您使用的是gridpanel）conf来设置viewConfig：您的表的{preserveScrollOnRefresh：true}。
非常感谢！我会尽快尝试（我需要将我的 ExtJS 4.0.2a 升级到 4.1 版本）

【解决方案2】：

您可以使用preserveScrollOnReload 查看配置属性：

viewConfig: {
    preserveScrollOnReload: true
},

【讨论】：

注意：如果你制作 grid.store.load(); preserveScrollOnReload 不起作用！但是 grid.store.reload();将工作并保存网格位置。

【解决方案3】：

以下是在 Grid 中使用 preserveScrollOnRefresh 的方法：

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

    extend: 'Ext.grid.Panel',

    viewConfig: {
        preserveScrollOnRefresh: true
    }

这是一个 JSFiddle 演示了这一点：

http://jsfiddle.net/cdbm6r0o/7/

但是，当您选择一行时，它似乎不太正常。我不确定这是否是一个错误。

“刷新”事件由此代码触发：

grid.store.loadData(dataToLoad);

我不知道触发“刷新”的任何其他事件

补充说明：

我需要 Ext.toolbar.Paging。尽管我没有使用它，但当我选择了一行或多行时，它搞砸了滚动保留，因此请确保从您的需求中删除分页。
如果我同时在桌子上使用 bufferedrenderer 插件，滚动保留似乎不起作用。
tablePanel.getView().focusRow(recrow) 看起来也很有趣，但也不适用于 bufferedrenderer。

【讨论】：