本文主要是介绍修改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面板中看到下图所示的情况，现在只渲染了活动标签页，其他标签页还没渲染。
这篇关于修改Ext.ux.GroupTabPanel让它支持延迟渲染的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
