修改Ext.ux.GroupTabPanel讓它支援延遲渲染

在Ext JS包樣本目錄的ux目錄下有一個Ext.ux.GroupTabPanel組件，可實現左側分組顯示菜單。這個組件有個小問題，就是在第一次渲染的時候，會把所有標籤頁都渲染了。這對有很多標籤頁的應用程式很不利，第一渲染的時間成本太高。在Ext.ux.GroupTabPanel內部是使用卡片Card）布局來實現標籤頁的切換的，但是作者在定義卡片布局的時候，並沒有設定為可以延遲渲染，而是使用了預設了非延遲渲染，因而，修改的基本思路就是改變布局的設定。
在GroupTabPanel.js檔案的initComponent方法內，在items內定義兩個一個樹面板和一個容器，其中的容器就是用來顯示標籤頁的，但它的布局定義如下：        layout: 'card'    
這是造成沒有延遲渲染的原因，因為卡片布局預設是不延遲渲染的。因而，要修改的地方就是這裡，首先，是在initComponent方法之上添加一個屬性deferredRender，然後在使用時，可通過該屬性控制卡片布局是否使用延遲渲染，預設值為true，也就是使用延時渲染，代碼如下：deferredRender : true,

然後，將容器的布局修改為：
        layout: {    
                type:'card',    
                deferredRender:me.deferredRender    
        },    

這樣，就可以通過deferredRender來控制是否採用延遲渲染了。現在，修改examples\grouptabs目錄下的grouptabs.js檔案，在“activeGroup: 0,”下添加“deferredRender:false,”，現在是沒有延遲渲染的，在Firebug的HTML面板中會看到如所示的情況，所有的標籤都已經渲染出來了，只是沒有顯示而已display:none）。650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/11520221W-0.PNG" alt="" />
650) this.width=650;" src="../attachment/201304/144735157.png" alt="" border="0" />把“deferredRender:false,”屏蔽掉，會在Firebug的HTML面板中看到所示的情況，現在只渲染了活動標籤頁，其他標籤頁還沒渲染。
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131228/1152021202-1.PNG" alt="" />
650) this.width=650;" src="../attachment/201304/144759149.png" alt="" border="0" />