ExtJS：重新加载数据存储而不重绘网格答案

【问题标题】：ExtJS: Reload datastore without redrawing gridExtJS：重新加载数据存储而不重绘网格
【发布时间】：2011-07-02 02:53:12
【问题描述】：

（ExtJS 3.3.1）

调用 grid.store.reload() 后如何保存网格的滚动位置？

【问题讨论】：

标签： extjs scroll grid reload store

【解决方案1】：

我设法像这样修复它：

this.store = new Ext.data.Store({
    listeners:{
        'load':function (store, records, options) {
            var restoreScroll = function(scrollState){
                grid.getView().restoreScroll(scrollState);
            };
            if (grid.view && grid.view.scroller){
                _.delay(restoreScroll, 10,grid.getView().getScrollState());
            }
        }
    }, ...
}

如您所见，我使用 _.delay（underscore.js 框架的）。这就像一个 setTimeout。

一个更优化的版本，不使用'restoreScroll'功能没有成功。我认为调用 restoreScroll 时视图会发生变化。我必须花 10 毫秒。 1 还不够。正如其他人所说，ext.js 使用了大量的延迟调用。

【讨论】：

【解决方案2】：

这是两个不同的问题。

首先，要在不重绘网格的情况下重新加载商店，请使用store.suspendEvents()，然后在加载回调中调用store.resumeEvents()。

刷新后恢复滚动位置有点棘手，特别是因为 ExtJS 在 Firefox 中过度使用了setTimeouts 和defers。尝试使用var state = view.getScrollState() 保存滚动状态，然后使用view.restoreScroll.defer(1, state) 恢复它

【讨论】：

【解决方案3】：

最后我在 extjs 网格常见问题中找到了this section。此片段不直接在 webkit-browsers 中运行。您必须添加一个超时并稍后调用恢复部分。 100ms 帮助了我。这就是我现在拥有的：

grid.getView().on('beforerefresh', function(view) {
  view.scrollTop = view.scroller.dom.scrollTop;
  view.scrollHeight = view.scroller.dom.scrollHeight;
});

grid.getView().on('refresh', function(view) {
    setTimeout(function () {
        view.scroller.dom.scrollTop = view.scrollTop + (view.scrollTop == 0 ? 0 : view.scroller.dom.scrollHeight - view.scrollHeight);
    }, 100);
});

在 IE8、Chrome9、Firefox3.6 中运行

Opera 11 中没有

这个解决方案有一个缺点：没有主动告诉视图不要恢复滚动位置，如果你通过分页器转到下一页，它也会恢复。

我认为 sencha 应该将此功能集成为一个选项，因为它是一种深度集成，可以告诉网格视图在商店重新加载数据源的相同位置时恢复位置，并且在更改数据源时不这样做baseparams 是制作的......左右。

【讨论】：

【解决方案4】：

listeners: {
                beforerefresh: function(v) {
                    v.hide();
                },
                refresh: function(v) {
                    v.show();
                }
            }

为我工作（添加视图配置）

【讨论】：

【解决方案5】：

这篇文章最近帮助我发现视图保持对滚动状态的控制。我能够 view.saveScrollState() 然后推迟 view.restoreScrollState() 与 timeOut。超时时间越长，返回越不和谐，因此请注意，您需要最少的 timeOut 时间来刷新/渲染视图。早期帖子中缺少的是视图有一个“saveScrollState”，它在内部存储滚动位置。

view.saveScrollState();
//do some things here
setTimeout(function(){
   view.restoreScrollState();
},1);

【讨论】：