Modify Ext. ux. GroupTabPanel to support delayed rendering.

There is an Ext. ux. GroupTabPanel component under the ux directory of the Ext JS package sample directory, which enables the left-side grouping display menu. This component has a small problem, that is, all tabs are rendered during the first rendering. This is not good for applications with many tabs, and the time cost of the first rendering is too high. In Ext. ux. the GroupTabPanel uses the Card layout to switch tabs. However, when defining the Card layout, the la s are not set to delayed rendering, instead, non-delayed rendering is used by default. Therefore, the basic idea of modification is to change the layout settings.
In GroupTabPanel. in the initComponent method of the js file, two tree panels and one container are defined in items. The container is used to display tabs, but its layout is defined as follows: layout: 'cart'
This is the cause of no delay in rendering, because the card layout does not delay rendering by default. Therefore, here we need to modify it. First, we need to add a deferredRender attribute on the initComponent method. Then, we can use this attribute to control whether the card layout uses delayed rendering, the default value is true, that is, latency rendering. The Code is as follows: deferredRender: true,

Then, modify the container layout:
Layout :{
Type: 'card ',
DeferredRender: me. deferredRender
},

In this way, you can use deferredRender to control whether to adopt delayed rendering. Now, modify the grouptabs under the examples \ grouptabs directory. add "deferredRender: false," under "activeGroup: 0," in the js file. There is no delay in rendering. The figure shown in the HTML panel of Firebug is displayed, all labels have been rendered, but they are not displayed. 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"/> block "deferredRender: false," and you will see the situation shown in the HTML panel of Firebug, currently, only the active tab is rendered, and other tabs are not rendered.
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"/>