Question

是否可以在extJS（4.1）网格中进行infinte滚动，其数据存储是手动加载的？

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上）。

然而：我找到的所有示例，dataStore都有一些代理/阅读器等。

//由于

Answer 1

如果您按照in the Ext JS 4.1.3 docs:所述在商店中使用buffered: true配置，则可以。

缓冲：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
}
默认为：false

自2004年以来可用

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

警告：您没有找到任何无限滚动的本地商店示例，因为无限滚动的记录数量超过您应合理保留的记录数量当地商店。

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

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

Answer 2

升级后我发现在extJS 4.2（测试版）中我更容易。无限滚动与数据存储分离。 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);

应用程序如此现在要快得多。

在extJS本地数据存储上无限滚动

2 个答案: