Ext JS 4.2 Grid预览


		   随着新的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的要按以下形式定义：
[javascript]  
// 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组件现在只负责响应显示相关的缓冲数据。
[javascript] 
// 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的性能改进是你的应用程序的一个有益补充。

补充：web前端 , JavaScript ,