关于 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” 的功能。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神秘_博士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值