在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面板中看到下图所示的情况,现在只渲染了活动标签页,其他标签页还没渲染。
分享到:
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...
Ext.ux.tree.treegrid异步加载,点击节点加载数据
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
ext.ux.uploadDialog实例
1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid....
EXTjs的上传组件
[Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree
Ext.ux.UploadDialog批量上传文件应用,后台采用com.jspsmart.upload.SmartUpload。myeclipse工程,导入即可运行。
Ext+SwfUpload做的一个多文件上传的插件.
带复选框的这是经过测试可以用的下拉树
在做文件上传的时候,发现了Ext.ux.UploadDialog这个强大的东西,实现了一下
工程文件 博文链接:https://mutongwu.iteye.com/blog/693692
Ext.ux.GoogleChart extjs插件Ext.ux.GoogleChart extjs插件
ext.ux.menu.storemenu.zip
这个文件是重写ext的ColorPickerFieldPlus控件,实现自定义调色,和ps取颜色一样,比Ext自带的颜色多很多,是自己可以调的
Ext.ux.touch.DateTimePicker 该扩展通过扩展 Ext.Picker 为 Sencha Touch 框架提供了一个 DateTimePicker。用法datetimePicker = new Ext.ux.touch.DateTimePicker({ useTitles: true, id: 'dt', value: { day: 23,...
NULL 博文链接:https://lingf.iteye.com/blog/1188654
NULL 博文链接:https://canfly2010.iteye.com/blog/545673