4

是否可以在手动加载其数据存储的 extJS (4.1) 网格中进行无限滚动？

myStore = Ext.create('Ext.data.Store', {
    fields:givenStoreFields,
    data: [[]],
});

myGrid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    columns: givenColumns,
});

就我而言，我从服务器获取数据，调整数据，然后手动加载到存储中。

myStore.loadData(fetchedAndTweaked);

由于 fetchedAndTweaked 包含许多行，因此渲染速度非常慢，并且会减慢整个浏览器的速度。因此，我想向 myGryd 和 myStore 添加参数以进行“无限”滚动（在数据集 fetchedAndTweaked 上）。

但是：我找到的所有示例，数据存储都有一些代理/阅读器等。

//谢谢

4

2 回答 2

4

如果您按照 Ext JS 4.1.3 文档中的buffered: true说明在商店中使用配置，则可以： .

buffered : Boolean 允许 Store 在页面缓存中预取和缓存记录页面，然后满足来自此页面缓存的加载要求。

要使用缓冲存储，请通过加载第一页来启动该过程。呈现的行数是自动确定的，并且请求和缓存保持缓存准备好滚动所需的页面范围。例子：

myStore.loadPage(1); // Load page 1

PagingScroller 被实例化，它将监视网格中的滚动，并根据需要从页面缓存中刷新视图的行。当视图的滚动在预取数据任一端附近的数据上绘制时，它还会将新数据拉入页面缓存。

从预取数据触发视图刷新的边距是 Ext.grid.PagingScroller.numFromEdge、Ext.grid.PagingScroller.leadingBufferZone 和 Ext.grid.PagingScroller.trailingBufferZone。

触发将更多数据加载到页面缓存中的边距是leadingBufferZone 和 trailingBufferZone。

默认情况下，只有 5 页数据缓存在页面缓存中，当视图向下移动通过数据集时，页面“滚动”出缓冲区。将此值设置为零意味着页面缓存中不会滚动任何页面，并且最终整个数据集可能会出现在页面缓存中。只要数据集没有达到天文比例，这有时是可取的。

通过将 SelectionModel 配置为在这些记录循环出存储的主集合时不丢弃其集合中的记录，可以跨页面边界维护选择状态。这是通过像这样配置 SelectionModel 来完成的：

selModel: {
    pruneRemoved: false
}

默认为：假

可用时间：4.0.0

如上所述，您还必须将pageSize商店上的配置设置为您想要的。

一句警告：您找不到任何具有无限滚动的本地商店的示例，因为使无限滚动可行的记录数超过了您应该合理地保留在本地商店中的记录数。

换句话说，渲染并不是唯一降低浏览器速度的因素，它也是您尝试在本地处理的数据量。

如果您觉得需要实现无限滚动，则可能是时候转换为远程加载的数据存储了。

于 2013-01-13T02:22:25.033 回答
3

升级后我发现这在 extJS 4.2(beta) 中要容易得多。无限滚动与数据存储分离。IE 使用什么类型的数据存储并不重要。排序也可以按您的意愿工作。

store = Ext.create('Ext.data.SimpleStore',{
        autoLoad: true,
            pageSize:100,
            data:[
                []
            ], 
     }

Ext.require('Ext.grid.plugin.BufferedRenderer') 
var grid = Ext.create('Ext.grid.
             plugins: 'bufferedrenderer',
             store : store,
        }
//I load matrix data directly in the store for speed
store.loadRawData(matrixData);

应用程序现在快得多了。

于 2013-03-21T13:00:13.543 回答