ExtJS：在不重新绘制网格的情况下重新加载数据存储

（ExtJS 3.3.1）

---

调用grid.store.reload（）后，如何保存网格的滚动位置？

这是两个不同的问题

首先，要在不重新绘制网格的情况下重新加载存储，请使用

store.suspendEvents（）

，然后在加载回调中调用

store.resumeEvents（）

刷新后恢复滚动位置有点棘手，特别是因为ExtJS在Firefox中过度使用了

setTimeout

s和

defer

s。尝试使用

var state=view.getScrollState（）

保存滚动状态，然后使用

view.restoreScroll.defer（1，state）

还原滚动状态。最后，我在extjs网格常见问题解答中找到了它。这个被剪断的页面不会直接在webkit浏览器中运行。您必须添加一个超时，稍后调用还原部分。100毫秒帮了我的忙。这就是我现在拥有的：

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中运行

在歌剧11中没有

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

---

我认为sencha应该将此功能作为一个选项进行集成，因为如果存储重新加载数据源的相同位置，则通知网格视图恢复位置，而如果对baseparams进行了更改，则不这样做，这是一个深度集成。。。大概是这样。

我设法像这样修复了它：

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());
            }
        }
    }, ...
}

如您所见，我使用了u.delay（下划线.js框架的）。这就像设定超时

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

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

---

为我工作（加载项视图配置）

这篇文章最近帮助我发现视图保持了对滚动状态的控制。 我能够查看.saveScrollState（）然后使用超时延迟查看.restoreScrollState（）。超时时间越长，返回的结果越不一致，因此请注意，您希望视图刷新/渲染的最小超时时间。以前的文章中缺少的是视图有一个“saveScrollState”，它在内部存储滚动位置

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