ExtJS Grid 速度慢，有 3000 多条记录答案

【问题标题】：ExtJS Grid slow with 3000+ recordsExtJS Grid 速度慢，有 3000 多条记录
【发布时间】：2014-06-05 15:21:17
【问题描述】：

我正在使用 ExtJS Grid，它在 3000 多条记录时变得相当缓慢。排序大约需要 4 秒。

我在想也许可以在我的表格中使用分页。但是在阅读文档之后，我仍然有点不确定分页在 extjs 中是如何工作的。每次翻页时都会从服务器中提取数据吗？我宁愿不是这样。我希望 3000 条记录保存在浏览器中，然后呈现的只是这些行的一部分。

我也在使用 Extjs 版本 4.2.1。如果我升级到版本 5。我会获得一些性能改进吗？

【问题讨论】：

想解释一下为什么投票接近？
是的，分页由服务器处理，因为网格不知道数据集。因此，根据开始、限制参数和存储的总属性，客户端请求服务器获取数据集。您可以使用本地分页和本地排序如果这符合您的要求。要使用本地分页，您可以使用分页内存代理。这里是 docs.sencha.com/extjs/4.2.0/#!/api/…

标签： javascript extjs extjs4 extjs5

【解决方案1】：

尝试使用缓冲渲染器插件，3000+ 条记录并不多，使用插件。

煎茶文档的片段：

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    autoLoad: true,
    plugins: {
        ptype: 'bufferedrenderer',
        trailingBufferZone: 20,  // Keep 20 rows rendered in the table behind scroll
        leadingBufferZone: 50   // Keep 50 rows rendered in the table ahead of scroll
    },
    // ...
});

您可以使用尾随/前导缓冲区配置来修剪您的网格，或者只是从配置中跳过它们。我从来不需要修整自己

参考： http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.plugin.BufferedRenderer

【讨论】：

您可以看到缓冲渲染器在运行here。大约有 1000 条记录。
想！感谢 Saki，你的网站总是很棒！
谢谢奥利弗。如果愿意，您也可以在此处发表评论。

【解决方案2】：

您可以将数据保存在 LocalStorage 中。它允许您将数据存储在浏览器中。您需要一个数据模型，用 XML 中的数据填充并存储在浏览器中。下次您只需检查数据是否已存储，如果没有则下载。 Ext Grid 可以很好地处理这些数据。

它对我有用。

【讨论】：