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

时间:2012-10-26 14:07:50

标签: javascript extjs4.1

我在Sencha ExtJs 4.0.2a中使用 grid.Panel ,我每隔60秒重新加载一个Json商店。

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

我使用任务:

重新加载网格中的数据
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);

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

问:数据加载后有没有办法保持滚动条位置?

提前致谢!

4 个答案:

答案 0 :(得分:18)

尝试这个坏男孩在刷新时保留滚动位置:

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

这对我的树视图起作用。

viewConfig: {
   preserveScrollOnRefresh: true
}

答案 1 :(得分:7)

以下是如何在网格中使用 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。

答案 2 :(得分:1)

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

viewConfig: {
    preserveScrollOnReload: true
},

答案 3 :(得分:0)

您可以在viewConfig中使用preserveScrollOnReload:true

viewConfig:{         preserveScrollOnReload:true  },