你好,游客 登录 注册 搜索
背景:
阅读新闻

修改Ext.ux.GroupTabPanel让它支持延迟渲染 - 黄灯桥的专栏

[日期:2013-04-02] 来源:  作者: [字体: ]

在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面板中看到下图所示的情况,现在只渲染了活动标签页,其他标签页还没渲染。






收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻