抢先预览 ExtJS 4.2 的表格控件 已翻译 100%

oschina 投递于 2013/01/23 09:28 (共 7 段, 翻译完成于 01-23)
阅读 2881
收藏 1
1
加载中

随着Ext JS 4.2 Beta的发布,我们改善了很多内容。你可以在论坛公告里阅读修改细节。本文中,我们将着重介绍性能提高的表格(Grid)控件。

在以前的博文《Ext JS 4.1 性能说明(Ext JS 4.1 Performance) 》《优化Ext Js 4.1应用(Optimizing Ext JS 4.1-based Applications)》中,我们已经提高了表格控件渲染缓冲的兼容性。Ext JS 4.2又增强的表格控件的缓冲渲染性能,并允许在更多情况下使用并减少配置内容。这项优化大幅度增强响应式应用中的大数据展示。

傅小黑
傅小黑
翻译于 2013/01/23 11:46
3

Ext JS 4.1 和 4.2 的表格控件对比

在Ext JS 4.1中,当用户每次滚动缓冲区(浏览到缓冲内容之外的内容),表格控件都会重新渲染。比如,一个表格控件有50行,当前展示100-150行。用户向下滚动到105行,表格控件会重新渲染105-155行。

滚动缓冲区后,Ext JS 4.1会抛弃所有行列,重新生成缓冲区内容。

Ext JS 4.2 只会添加或删除你滚动到的行列,之间的行不受影响。

傅小黑
傅小黑
翻译于 2013/01/23 11:54
1

Ext JS 4.2对改变表格控件的展示进行管理。参照之前的例子,4.2的表格控件将删除100-104行(不再可见,滚回会重新添加)和添加151-155行作为新元素。这项优化非常明显地降低渲染延迟,随之性能提高。

我们用一个2000行自动下滚的表格测试性能。统计在IE8(Windows XP, 1.8G 酷睿 Thinkpad, 1G内存)上2000行从顶部滚到底部所需时间。Ext JS 4.2降低了2倍(甚至更多)的渲染延迟 - 更佳平滑地滚动。

傅小黑
傅小黑
翻译于 2013/01/23 12:16
1

Ext.grid.plugin.BufferedRenderer

Ext JS 4.1中为了使用表格空间的渲染缓冲,我们必须手动的定义带有缓冲配置的数据集,才能与页面滚动交互。就是如下的代码:

// Ext JS 4.1 定义缓冲数据集
var store = Ext.create('Ext.data.Store', {
    // 允许用缓冲数据交互
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    //etc...
});

当然缓冲也是提高数据集性能很方便的方法。也就是说,数据集会监听数据是否显示。当一些控件共享数据集时,定义缓冲反而会引起问题。

而且,缓冲的数据集在用户修改表格数据的时候会出现问题。因为只有渲染的数据保存在数据主集合中(没渲染的在隐藏的私有页面映射中),修改和同步数据才会生效。

傅小黑
傅小黑
翻译于 2013/01/23 12:52
1

Ext JS 4.2通过引入Ext.grid.plugin.BufferedRendererplugin该插件解决了这个问题。该插件允许定义的的数据存储忽略其显示-网格组件目前是对缓存显示的数据进行独自响应的。

// new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer
Ext.require([
    'Ext.grid.plugin.BufferedRenderer'
]);
var store = Ext.create('Ext.data.Store', {
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});
 
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    plugins: 'bufferedrenderer',
    //etc...
});
该网格将产生一部分表格—正如在  Ext JS 4.1.x里实现的一样—但移除了为数据存储所增加的配置。这同时意味着所有的网格/存储特性(如分组和编辑)将和该插件无缝集成。由于缓存功能在存储里不在定义,通常的存储功能(编辑/保存/同步)都能同时在缓存网格中可用。

说了这么多,缓存存储(上面的第一个例子)在 Ext JS 4.2中依然存在。缓存数据集对很多现实世界的应用仍然很重要—新的缓存网格插件是一种简单的并带有加强了具体性能的修正性的网格组件。
等PM
等PM
翻译于 2013/01/23 13:59
1

配置

BufferedRenderer插件可以简易配置渲染视区外的数据行,也就是从数据源(远程或本地)缓冲几页数据。

Ext JS 4.1.x中的“trailingBufferZone”和“leadingBufferZone”配置参数执行的操作相同——但现在他们依赖于插件而不是数据集(和以前一样,数据集是需要的——但现在相同配置的插件是必须的)。你可以创建一个大的数据表用于滚动而不用刷新,也可以是保存多页内容在内存中加快滚动时的刷新。

(译者注:当前可见的表格内容为Rendered Table,回滚时的缓冲区称为trailingBufferZone,下滚时的缓冲区即leadingBufferZone,具体可见上文提到的博文《优化Ext Js 4.1应用(Optimizing Ext JS 4.1-based Applications)》中配图)

BufferRenderer插件还可以添加一个“variableRowHeight”属性,当数据内容大小不可预测时(根据单元格渲染或字符间距计算实际值)。默认值false,以优化表格控件的性能。(注意:这个特性很像“grouping”(分组),RowExpander插件会默认设置这个属性)。

下载 Ext JS 4.2 Beta

傅小黑
傅小黑
翻译于 2013/01/23 18:44
1

查看Ext JS 4.2示例

可以通过示例来查看BufferedRenderer 插件是如何工作的。下载最新Ext JS 4.2.0 SDK,打开下面一些关于Grid的示例:

  • Infinite Scrolling Grid (infinite-scroll.js)
  • Infinite Scrolling Tuner (infinite-scroll-grid-tuner.js)
  • Buffered Scrolling (buffer-grid.js)
  • Variable Height Rows (var-height-rows.js)

希望Grid的这些更新有助于您的应用。



cypbkd
cypbkd
翻译于 2013/01/23 13:05
1
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(1)

缪斯的情人
缪斯的情人
这文章很早就翻译了http://dqhuang.blog.51cto.com/2522725/1086692
返回顶部
顶部