Ext JS 存储在应缓冲数据时意外重新加载数据

Posted 2023-02-26

【中文标题】Ext JS 存储在应缓冲数据时意外重新加载数据

【英文标题】：Ext JS store unexpectedly reloads data when it should be buffered

【发布时间】：2014-04-24 17:43:00

【问题描述】：

我们正在尝试解决这个例子： http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/buffer-grid.html

例如在店里：

// create the Data Store
var store = Ext.create('Ext.data.Store', 
    id: 'store',
    pageSize: 50,
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    // never purge any data, we prefetch all up front
    purgePageCount: 0,
    model: 'ForumThread',
    proxy: 
        type: 'memory'
    
);

//and in the grid:
...
store: store,
verticalScroller: 
    xtype: 'paginggridscroller',
    activePrefetch: false
,
loadMask: true,
...

但是当我们滚动过去网格中的 pageSize 记录时，我们会出现长时间的停顿，这不仅仅是呈现下一组记录——存储本身正在从我们的 Web 服务重新加载数据。调用我们的 Web 服务会加载所有数据，我们不希望它在用户滚动时重新加载。我们希望 RENDERING 被缓冲，而不是数据加载，就像示例中所说的“他的示例说明了预先加载所有记录并缓冲渲染”。主要是因为我们希望避免此时将排序和排序转移到服务器，同时也是为了提高性能。然而，我们也不希望立即渲染所有内容，因为这会导致 IE8 中可怕的长时间运行的 javascript 错误。关于什么可能导致商店在此模式下重新查询数据源的任何想法？

【参考方案1】：

如果您希望加载所有记录并且只缓冲渲染，那么您需要在商店中设置buffered:false，并且您需要使用buffered grid view renderer。

【参考方案2】：

您可以在页面加载 (allRecordStore) 时将所有记录加载到一个存储中，但使用另一个存储用于填充来自 allRecordStore 的记录的网格 (gridStore)，并在用户处于通过网格进行分页。

您可以在网格的 PagingToolBar 上使用beforechange 侦听器（附加到其bbar 配置选项）。

在此侦听器中，您可以执行以下操作：

//you've probably have already shown items 0,19 when the page loaded        
var items = allRecords.getRange(20, 40); 
gridRecords.load(items);

显然，您需要通过查看page 参数的变量start 来实现一个逻辑来跟踪索引（是用户查看记录 80 到 100、20 到 40 等） beforechange 监听器。 start 是我在我的商店的配置选项paramNames 中选择的名称

我就是这样做的，但我的大部分经验还是使用 3.x，也许有更简单的方法来使用 4.x

【讨论】：

弗朗西斯，这听起来很有希望。你知道任何可以指向我的示例代码吗？谢谢

@Luther 您使用的是哪个 ExtJS 版本？或许咲希的回答毕竟更合适。 dev.sencha.com/deploy/ext-4.0.1/examples/grid/buffer-grid.html

我们正在使用 4.1，如果它可以帮助解决这个问题，我们正在研究 4.2

我认为我们将再次尝试这种方法。我们在网格上进行了排序，这增加了复杂性。