Ext JS 4.2 Grid预览

      原文： http://www.sencha.com/blog/first-look-at-ext-js-4-2-grid?mkt_tok=3RkMMJWWfF9wsRokuKTBZKXonjHpfsX77%2BsqWK%2B0lMI%2F0ER3fOvrPUfGjI4HRcV0dvycMRAVFZl5nR9dFOOdfQ%3D%3D

      随着新的Ext JS 4.2 Beta版本的发布，又发生了一系列的的变化。可以通过论坛公布的 说明来了解完整的细节。在本文，将突出讲述Grid组件的性能改善。

      在之前发表的《 Ext JS 4.1性能》和《 优化基于Ext JS 4.1的应用》中，强调了改进Grid组件的缓冲能力。Ext JS 4.2进一步提高了缓冲渲染的性能，并允许在更多情况下，以更少的配置来使用此功能。得益于这些优化，大型数据的应用程序的响应速度应该可以看到显著的提高。

     Ext JS 4.1与Ext JS 4.2中的Grid的对比

       在Ext JS 4.1，Grid组件每当用户滚动到缓冲区域时，物理上会重新渲染表格中的行。例如，假设Grid每次渲染50行数据，如果Grid当前显示的是100到 150行，而用户往下滚动到105行的记录，Grid将会重新渲染表格的行以显示105行到155行的记录。

      在Ext JS 4.1，当滚动到缓冲区域，Grid将扔掉所有行，并重新创建。

      在Ext JS 4.2，滚动时，Grid的行将被添加或删除，而之间的行将不会受到影响。

      在Ext JS 4.2，Grid组件改变了显示表格中行的管理方式。例如之前的示例，4.2中，Grid将删除100到104行（不再显示），并添加行151到155行作为新的元素。这样的优化结果就是显著减少渲染延迟和提高了性能。

      把2000行数据放在一起，并让它自动往下滚动进行性能测试，在IE8（Windows XP，使用1.8GHz CoreDuo，1GB RAM的Thinkpad）中，从顶部滚动到底部所花费的总时间，Ext JS 4.2的改进让延迟减少了2倍（或更多），也就是说，滚动将平滑，更流畅了。

Ext.grid.plugin.BufferedRenderer

      在Ext JS 4.1的Grid中实现缓冲渲染，需要手动定义Store的buffered配置项，以让它与分页滚动实现交互，这意味着Store的要按以下形式定义：

// Ext JS 4.1 style buffering on the store
var store = Ext.create('Ext.data.Store', {
    // allow the grid to interact with the paging scroller by buffering
    buffered: true,
    pageSize: 50,
    data: dataJson,
    model: 'Employee',
    proxy: {
        type: 'memory'
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    loadMask: true,
    //etc...
});

      虽然buffered配置项是优化性能的一个便捷方式，但这也意味着Store将根据显示来组织数据，而对一些要共享Store数据的组件来说，在Store层面来说缓冲功能可能存在问题。

      此外，在Ext JS 4.1中，当用户在Grid中编辑记录时，使用缓冲的Store会有问题。由于Store的主记录集中只存在渲染的行（未渲染的记录将被隐藏在一个私有页上），编辑记录并同步数据变得具有挑战性。

      Ext JS 4.2通过Ext.grid.plugin.BufferedRenderer插件解决了这个问题。这个插件可以让Store维护没有显示的数据，Grid组件现在只负责响应显示相关的缓冲数据。

// 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...
});

       Grid只渲染部分表格，与Ext JS 4.1.x使用的方式相同，不过，它移除了在Store中要添加的配置项。这也意味着所有的Grid/Store功能（如分组和编辑）都能无缝的使用该插 件。因为缓冲功能的定义不再在Store，因而常用的Store功能（编辑/保存/同步）都可以在一个缓冲的Grid上同时启用。

      虽然如此，在Ext JS 4.2，缓冲的Store还是存在的。在许多现在使用的应用程序中，缓冲数据集仍然是重要的，新的缓冲Grid插件只是一种替代方式，用来增强Grid组件的性能。

配置项

      BufferedRenderer插件可以很容易的配置来控制可见行外渲染行的数目，以及要从数据源（远程或本地）缓冲的数据页面数量。

      trailingBufferZone和leadingBufferZone配置项的配置方式与Ext JS 4.1.x的相同，不过，这些配置项现在是在插件内配置而不是Store。（如前所述，缓冲Store仍然存在，因此对于无缓冲Store，要确保这些值 在插件内进行配置）。既可为需要刷新之前提供更多的滚动而创建一个较大的表格，也可以在滚动时在内存保持更多的分页记录让刷新快。

      BufferedRenderer插件也可以通过配置variableRowHeight属性来应对不可预知大小的情况（可能涉及自定义单元格渲染或文本 换行的情况）。为了优化Grid性能，该配置项默认值为false。（注意：某些功能，如分组或Row Expander需要设置该配置项）。

下载Ext JS 4.2 Beta： http://cdn.sencha.io/ext-4.2.0-beta.zip

挖掘Ext JS 4.2示例

      要查看BufferedRenderer的示例，下载新的Ext JS 4.2.0 SDK，然后打开示例，并浏览到Grid示例（位于/examples/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的性能改进是你的应用程序的一个有益补充。

作者： Arthur Kay
Arthur Kay has been working with the Web since the late 1990s, when GeoCities and scrolling marquees were all the rage. Since those early days, Arthur graduated from Loyola University Chicago (where he studied Music and Computer Science) and has worked in a variety of professional roles throughout the Internet industry. Arthur currently lives in the Chicago suburbs and works as a Solutions Engineer for Sencha, Inc.