关于 Grid 的 Buffered(延迟渲染/无限滚动)相关配置在 ExtJS 各版本中变化

数据量大的时候,GridPanel 如果开启了 Buffered(延迟渲染/无限滚动),会极大提升性能。原理是,重复利用表格行 Dom 元素,每次只渲染可见(一屏)的数据。所以,即使数据量再大,对性能的影响也很小。

Ext JS 4.0.7

Ext.data.Store: 只有buffered:Boolean配置项,默认为false,当有多数据记录时,设置为true,显示数据效率上会有提高。
Ext.grid.Panel: 还未出现bufferedRenderer配置项和Plugin。

Ext JS 4.2.0

Ext.data.Store还保留buffered:Boolean配置项,默认为false
Ext.grid.Plugin新增了一个bufferedRenderer,使用方法如下:

var grid = Ext.create('Ext.grid.Panel', {
    // ...
    autoLoad: true,
    plugins: {
        ptype: 'bufferedrenderer',
        trailingBufferZone: 20,  // Keep 20 rows rendered in the table behind scroll
        leadingBufferZone: 50   // Keep 50 rows rendered in the table ahead of scroll
    },
    // ...
});

Ext JS 5.1.0

Ext.data.Store取消了buffered:Boolean配置项。
Ext.grid.Panel新增了bufferedRenderer配置项,默认为true,但在Ext.grid.Plugin取消了bufferedRenderer
所以Ext JS 5.1.0,不要在Ext.data.Store中配置buffered,只需要Ext.grid.Panel设置bufferedRenderer配置项。

Ext JS 6+

ExtJS 6+ 合并了 以往的 ExtJS 和 移动框架 Sencha Touch。其中 ExtJS 成为了 Classic Toolkit,Sencha Touch发展成为了 Modern Toolkit。

Classic 从 5 到 6几乎没有改变,所以 Classic 表格 Ext.grid.Panelbuffered配置和上面 Ext JS 5.1.0 一样。

Modern 的 Ext.grid.Grid 继承自 Ext.dataview.List(Modern 才有的组件)。List有一个 infinite 配置项,功能类似 Buffered,默认为 null(即不开启此功能),若要开启,设置为 true
不过,Ext.grid.Grid 默认的 infinitetrue,所以Ext.grid.Grid默认已经开启了 “Buffered” 的功能。

猜你喜欢

转载自blog.csdn.net/lovelyelfpop/article/details/83752386
今日推荐