隨著新的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] view plaincopy
  1. // Ext JS 4.1 style buffering on the store  
  2. var store = Ext.create(`Ext.data.Store`, {  
  3.     // allow the grid to interact with the paging scroller by buffering  
  4.     buffered: true,  
  5.     pageSize: 50,  
  6.     data: dataJson,  
  7.     model: `Employee`,  
  8.     proxy: {  
  9.         type: `memory`  
  10.     }  
  11. });  
  12.    
  13. var grid = Ext.create(`Ext.grid.Panel`, {  
  14.     store: store,  
  15.     loadMask: true,  
  16.     //etc…  
  17. });  
  18.    

      雖然buffered配置項是優化效能的一個便捷方式，但這也意味著Store將根據顯示來組織資料，而對一些要共享Store資料的元件來說，在Store層面來說緩衝功能可能存在問題。

      此外，在Ext JS 4.1中，當使用者在Grid中編輯記錄時，使用緩衝的Store會有問題。由於Store的主記錄集中只存在渲染的行（未渲染的記錄將被隱藏在一個私有頁上），編輯記錄並同步資料變得具有挑戰性。
      Ext JS 4.2通過Ext.grid.plugin.BufferedRenderer外掛解決了這個問題。這個外掛可以讓Store維護沒有顯示的資料，Grid元件現在只負責響應顯示相關的緩衝資料。
[javascript] view plaincopy
  1. // new Ext JS 4.2 Ext.grid.plugin.BufferedRenderer  
  2. Ext.require([  
  3.     `Ext.grid.plugin.BufferedRenderer`  
  4. ]);  
  5. var store = Ext.create(`Ext.data.Store`, {  
  6.     pageSize: 50,  
  7.     data: dataJson,  
  8.     model: `Employee`,  
  9.     proxy: {  
  10.         type: `memory`  
  11.     }  
  12. });  
  13.    
  14. var grid = Ext.create(`Ext.grid.Panel`, {  
  15.     store: store,  
  16.     loadMask: true,  
  17.     plugins: `bufferedrenderer`,  
  18.     //etc…  
  19. });  
  20.    

      
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示例

      要檢視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.