Question

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

e.g。在商店里：

// 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，而不是数据加载，就像示例状态＆＃34;他的示例说明了预先加载所有记录并缓冲渲染。＆＃34;主要是因为我们希望避免在此时向服务器移动排序和排序，而且还要考虑性能。然而，我们也不想立即渲染所有内容，因为这会导致IE8中可怕的长时间运行的javascript错误。有关什么可能导致商店在此模式下重新查询数据源的想法？

Answer 1

您可以在页面加载（allRecordStore）时加载一个商店中的所有记录，但是使用另一个商店作为网格（gridStore）填充来自allRecordStore的记录并使用{ {1}}当用户正在通过网格进行分页时。

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

在这个监听器中，您可以执行以下操作：

bbar

显然，您需要通过查看{{1的变量//you've probably have already shown items 0,19 when the page loaded var items = allRecords.getRange(20, 40); gridRecords.load(items);来实现跟踪索引的逻辑（用户查看记录80到100,20到40等） start侦听器的参数。 page是我在商店

的配置选项beforechange中选择的名称

我就是这样做的，但是我的大多数经验都是3.x，也许有更简单的方法可以用4.x

Answer 2

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

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

2 个答案: