ExtJS:重新加载数据存储而不重绘网格

Posted

技术标签:

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

(ExtJS 3.3.1)

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

【问题讨论】:

【参考方案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);

【讨论】:

以上是关于ExtJS:重新加载数据存储而不重绘网格的主要内容,如果未能解决你的问题,请参考以下文章

extjs 动态存储模型网格列

extjs 嵌套数据网格过滤器和重新加载在 viewModel 上不起作用

具有数据绑定 URL 的 ExtJS 存储不重新评估数据属性

store.load 后的 Extjs 网格选择有不正确的数据

ExtJS:: 如何过滤网格中的行,但不在存储中

从 ExtJS 4 中的存储重新加载数据