ExtJs - 基于远程数据的分页和缓冲网格,无需远程分页和过滤

时间:2014-01-29 04:22:17

标签: sorting extjs pagination extjs4.2 extjs-stores

在ExtJ中,远程数据可以轻松显示在分页网格中。但要实现这一点,服务器端必须支持分页。此外,在分页网格中进行局部排序和过滤是没有用的,因为它只过滤当前页面的元素。为了获得一致的结果,需要进行远程过滤和排序。对于无限滚动网格中的缓冲存储,同样适用。

但这并不总是正确的解决方案。特别是当远程数据检索需要一些时间时,用户的过滤体验会降低。我们也不能使用javascript函数进行过滤或排序。

解决方案是让ExtJs一次读取所有数据,并使用该数据的本地副本来过滤和排序数据。我们需要整个数据集的中间存储,以及链接到网格的主存储来显示数据。但这需要主代理将中间存储作为数据源,据我所知,代理不能将另一个存储作为数据源。

有人知道如何解决这个问题吗?我不确定草绘的解决方案是否可行,但我需要的是以某种方式协调具有远程.json数据源并使用本地分页,过滤和排序。

我怎样才能做到这一点?

6 个答案:

答案 0 :(得分:2)

虽然标题表达了真正的关注点 ExtJs - 基于远程数据的分页和缓冲网格,没有远程分页和过滤,但问题的细节具有误导性。

事实上,工作解决方案是:使用buffered store而不是Bufferedrenderer

BufferedRenderer仅影响显示,但不影响商店的工作方式。

  • 本地排序和排序虽然缓冲存储不允许本地排序和排序,但此解决方案不会限制本地排序和排序。
  • 编辑:缓冲存储不支持插入行或sync使用服务器存储存储。使用BufferedRenderer显示在网格中的普通商店没有这些限制。

BufferedRenderer on the Sencha Blog

有一个很好的解释

<强>限制: 只能使用本地排序和过滤器实现无限滚动解决方案。总是(据我所知)寻呼必须在服务器上完成。远程分页还意味着远程过滤和排序。

答案 1 :(得分:1)

如果您不需要与服务器进行任何后续集成(例如,添加记录,编辑记录等),则始终可以使用从常规Ext.Ajax.request()检索的数据加载存储。一旦您使用检索到的数据加载商店,那么本地过滤/排序肯定会有效。

但是,我建议不要这么快放弃服务器端。您是否研究过任何可能优化性能的缓存解决方案或其他选项?虽然您概述的切换数据方法可行,但这样做的代价是远程感知存储和代理可以为数据管理带来的其他好处。

答案 2 :(得分:1)

@Lorenz:使用http://docs.sencha.com/extjs/4.2.0/source/PagingMemoryProxy.html#Ext-ux-data-PagingMemoryProxy并在代理中设置远程数据,例如。 store.getProxy.data = //使用store.load的json数据和加载存储,ext-4.2.1.883 \ examples \ locale \ multi-lang可能就是一个很好的例子。

答案 3 :(得分:1)

http://www.sencha.com/forum/showthread.php?262388-Ext.ux.data.PagingStore-updated-for-Ext-JS-4&p=1026287

这个主题帮助我实现了本地排序,过滤和分页的实现。

您可以将其配置为在需要时从服务器加载数据。通过在存储加载之前删除lastOptions。

答案 4 :(得分:1)

问题不太清楚。但我认为你想从远程服务器加载所有数据,你想要本地过滤和分页。这应该可以使用扩展pagingMemoryProxy。 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.data.PagingMemoryProxy

检查此示例是否相同。

演示http://demo.mysamplecode.com/ExtJs/pages/memoryPaging.jsp 代码http://www.mysamplecode.com/2011/12/extjs-pagingmemoryproxy-ajax-json-data.html

答案 5 :(得分:0)

使用loadRawData加载存储时,使用Ext.Ajax和内存代理分页在4.2.1中似乎不起作用