数据量大的时候,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” 的功能。