Extjs4 在新增了MVC結構這個特外還有一個亮點就是對grid的渲染展示做了重寫，也就是Extjs4支持大容量數據表渲染的特點。
我們很清楚，如果很大的數據量在頁面進行渲染的時候，不斷的操作DOM是十分消耗時長的，而Extjs4 中的bufferedrenderer插件則完美的解決了這個問題，讓大數據的加載輕而易舉。其中具體的實現原理請看下面的文檔，這裏只提前簡單的介紹一下buffereddrenderer的兩個重要特點：
1. 加載特點：
爲了保證大數據量的加載而產生對服務器的長時間請求這個問題，bufferedrenderer的設計思路是，分段（類似於分頁）加載，每次值請求一定量的數據，並不是一次性全部請求到客服端，需要實現這樣的效果只需要在store中設置允許自動分段加載就可以了。
// Ext JS 4.1 定義緩衝數據集
var store = Ext.create('Ext.data.Store', {
// 允許用緩衝數據交互
buffered: true,
pageSize: 50,
data: dataJson,
model: 'Employee',
proxy: {
type: 'memory'
}
});
buffer:true 這表明了讓store自動分段加載。這樣子每次但滾動條滾動到頁面數據塊完的時候，Extjs就會自動請求後臺，獲取下一段數據內容。
2. 渲染特點：
如果僅僅是加載上進行了這樣的設置的話，絕對不足以讓大數據在頁面展示成爲一種可以能，因爲這樣只是減少了和服務器的請求時長，而事實上面臨的更大的問題在於頁面的加載耗時。
起初或者說一般頁面的列表加載都是直接一次性渲染，當需要再次渲染新數據的時候則清除當前也的數據在重新加載新數據。而bufferedrenderer則是採用了單條數據的插入和刪除操作，避免了大面積DOM的更新操作。
bufferedrenderer在列表的可視區域以外的上下分別設置了一定量的緩衝區（這個緩衝區的大小是可以根據自己的需求設置的），通過緩衝區的不斷插入和刪除操作實現了大數據的渲染。
以上是個人看了bufferedrenderer後的一些理解，如有不完整的地方請各位提出，下面是關於bufferedrenderer的詳細實現文檔。
隨着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又增強的表格控件的緩衝渲染性能，並允許在更多情況下使用並減少配置內容。這項優化大幅度增強響應式應用中的大數據展示。
Ext JS 4.1 和 4.2 的表格控件對比
在Ext JS 4.1中，當用戶每次滾動緩衝區（瀏覽到緩衝內容之外的內容），表格控件都會重新渲染。比如，一個表格控件有50行，當前展示100-150行。用戶向下滾動到105行，表格控件會重新渲染105-155行。
滾動緩衝區後，Ext JS 4.1會拋棄所有行列，重新生成緩衝區內容。
Ext JS 4.2 只會添加或刪除你滾動到的行列，之間的行不受影響。
Ext JS 4.2對改變表格控件的展示進行管理。參照之前的例子，4.2的表格控件將刪除100-104行（不再可見，滾回會重新添加）和添加151-155行作爲新元素。這項優化非常明顯地降低渲染延遲，隨之性能提高。
我們用一個2000行自動下滾的表格測試性能。統計在IE8（Windows XP, 1.8G 酷睿 Thinkpad, 1G內存）上2000行從頂部滾到底部所需時間。Ext JS 4.2降低了2倍（甚至更多）的渲染延遲 - 更佳平滑地滾動。
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...
});當然緩衝也是提高數據集性能很方便的方法。也就是說，數據集會監聽數據是否顯示。當一些控件共享數據集時，定義緩衝反而會引起問題。
而且，緩衝的數據集在用戶修改表格數據的時候會出現問題。因爲只有渲染的數據保存在數據主集合中（沒渲染的在隱藏的私有頁面映射中），修改和同步數據纔會生效。
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.2中依然存在。緩存數據集對很多現實世界的應用仍然很重要—新的緩存網格插件是一種簡單的並帶有加強了具體性能的修正性的網格組件。
配置
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示例
可以通過示例來查看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)