本地数据的 Extjs 网格面板性能问题答案

【问题标题】：Extjs gridpanel performance issue with local data本地数据的 Extjs 网格面板性能问题
【发布时间】：2013-03-22 06:13:43
【问题描述】：

我正在开发一个网格，用户可以加载 xml 文件并通过网格面板进行编辑。它适用于大约 200 行。但是，有些用户可能希望一次加载 50000 条记录。

当我尝试加载包含 10k 条记录的文件时，firefox 崩溃并且 chrome 等待太多。经过一些调试，我意识到将数据渲染到面板需要太多时间。对于每一个新行，我都需要刷新需要太多时间的网格。

重要的一点是，xml 文件永远不会到达服务器端，我们用 extjs 读取它并加载到网格中。

是否可以加载整个数据以存储但请求一定数量的数据来呈现面板视图？

我尝试了无限网格但无法使其工作，因为我的数据源是一个字符串。您提供什么来管理 50k 数据。

【问题讨论】：

【解决方案1】：

我过去在尝试加载非常大的网格时遇到过类似的 ExtJS 问题。首先让我说，这当然不是他们的错 - 50,000 多条记录只是太多的数据。为了解决这个问题，我使用了分页。

查看their documentation 以获取分页工具栏。

这里是an example。

我唯一的其他建议是使用无限网格，但在您的 XML 数据上编写一个文件转换包装器以将其转换为 JSON。

【讨论】：

确实，您需要使用某种后端技术来解析您的 xml 并将片段（分页）发送到您的前端。如果您在网格中显示 50k 条记录，您的记忆力将会崩溃。
我添加了分页，它显着影响了性能。但是现在我有另一个问题是在过滤商店后更新分页工具栏。
分页工具栏真正做的是控制请求数据时发送到服务器的参数（start 和limit）。解析这些参数并使用它们的值来检索所需的数据取决于您的服务器技术。我通常使用 .NET 和 WCF Web 服务来执行我的数据提取。 WCF 为 JSON 提供对象序列化，并且很容易为 HTTP 请求设置。 Here is a WCF example。过滤时，您还需要在请求中发送过滤器值。