關於 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.Panel
的buffered
配置和上面 Ext JS 5.1.0 一樣。
Modern 的 Ext.grid.Grid
繼承自 Ext.dataview.List
(Modern 才有的元件)。List有一個 infinite
配置項,功能類似 Buffered,預設為 null
(即不開啟此功能),若要開啟,設定為 true
。
不過,Ext.grid.Grid
預設的 infinite
為 true
,所以Ext.grid.Grid
預設已經開啟了 “Buffered” 的功能。