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

Question

我们正在尝试解决这个例子： 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 错误。关于什么可能导致商店在此模式下重新查询数据源的任何想法？

Answer 1

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

Answer 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