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 中过度使用了setTimeout
s 和defer
s。尝试使用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 嵌套数据网格过滤器和重新加载在 viewModel 上不起作用
具有数据绑定 URL 的 ExtJS 存储不重新评估数据属性