1. 程式人生 > >關於 Grid 的 Buffered(延遲渲染/無限滾動)相關配置在 ExtJS 各版本中變化

關於 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” 的功能。