分類  >  Web前端 >

批改Ext.ux.GroupTabPanel讓它支持延遲渲染

tags:    時間:2013-12-10 01:19:56
修改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)。



把「deferredRender:false,」屏蔽掉,會在Firebug的HTML面板中看到下圖所示的情況,現在只渲染了活動標籤頁,其他標籤頁還沒渲染。


推薦閱讀文章

Bookmark the permalink ,來源:互聯網