ExtJs - 基于远程数据的分页和缓冲网格，没有远程分页和过滤

Posted 2023-03-10

【中文标题】ExtJs - 基于远程数据的分页和缓冲网格，没有远程分页和过滤

【英文标题】：ExtJs - paging and buffering grid based on remote data WITHOUT remote paging and filtering

【发布时间】：2014-02-20 17:20:17

【问题描述】：

在 ExtJs 中，远程数据可以很容易地显示在分页网格中。但要做到这一点，服务器端必须支持分页。此外，分页网格中的本地排序和过滤没有用，因为它只过滤当前页面的元素。为了获得一致的结果，需要远程过滤和排序。对于无限滚动网格中的缓冲存储，同样适用。

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

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

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

我怎样才能做到这一点？

【问题讨论】：

具有相同的要求，我尝试将商店的代理类型内存和“enablePaging”标志设置为 true。当我从 remote.json 传递“totalCount”时，分页工具栏处于活动状态。问题是没有。页面上显示的记录很多。我的意思是它没有占用 pageSize。

@Damon 你能用你的解决方案过滤和排序吗？

：本地排序在没有分页的情况下工作。仍然卡在分页问题上（总记录显示在第一页上）。不确定分页情况下的排序如何。

【参考方案1】：

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

事实上，工作解决方案是：使用buffered store，而不是Bufferedrenderer。

BufferedRenderer只影响展示，不影响店铺运作方式。

本地排序和排序

虽然缓冲存储不允许本地排序和排序，但此解决方案不会限制本地排序和排序。

编辑

：缓冲存储不支持插入行或synching 服务器与存储。使用 BufferedRenderer 在网格中显示的普通商店没有这些限制。

BufferedRenderer on the Sencha Blog有很好的解释

限制： 使用本地排序和过滤器只能实现无限滚动解决方案。总是（据我所知）分页必须在服务器上完成。而远程分页也意味着远程过滤和排序。

【参考方案2】：

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

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

【讨论】：

Ext.Ajax 是指使用 MemoryProxy，对吗？

除了更新和插入功能之外，远程感知存储还有其他好处吗？

嗯，使用远程数据的最大好处是，如果您的应用程序之外的数据有更新/添加，它可以是实时的。如果数据在应用程序的生命周期内被检索一次并存储在本地，显然只能通过显式请求或重新加载应用程序来获取更新。当然，使用远程数据存储，您不必处理该问题，因为您检索的数据（可能）是可用数据的最新表示。

【参考方案3】：

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

【讨论】：

好的，我明白你的意思了。我会仔细看看。

从 ExtJs 4.2.2 开始，这已被合并到常规 MemoryProxy 中，源代码引用：'Ext.ux.data.PagingMemoryProxy 功能已被合并到 Ext.data.proxy.Memory通过使用 enablePaging 标志。'

【参考方案4】：

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

这个线程在实现本地排序、过滤和分页方面帮助了我很多。

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

【参考方案5】：

这个问题不是很清楚。但我认为您想从远程服务器加载所有数据，并且需要本地过滤和分页。这应该可以通过扩展 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

【参考方案6】：

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