Ext tabpanel...
先来看示例1:
html页面:
<div id="my-tabs">
</div>
<div id="tab1" class="x-hide-display">
A simple tab
</div>
<div id="tab2" class="x-hide-display">
Another one
</div>
对应js脚本:
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
renderTo : 'my-tabs',
activeTab : 0,
width : 300,
items : [{
contentEl : 'tab1',
title : 'Tab 1'
}, {
contentEl : 'tab2',
title : 'Tab 2'
}]
});
})
生成的界面:
下面来该一个属性:
将html页面的代码改为:
<div id="my-tabs">
</div>
<div id="tab1">
A simple tab
</div>
<div id="tab2">
Another one
</div>
JS代码不变,再来看一下效果:
发现问题了吧,试一下点击tab2,发现another one又回到tabpanel里面了。
分析一下原因其实道理还是很简单的:
tabpanel的一个很重要的属性是deferredRender,该属性用于设置tab页的加载时机。默认为true,也就是说tabpanel默认是当你点击了tab页的标签才加载此tab页,这也就是为什么another one会跑到tabpanel的外面,因为没有设置deferredRender,只有当你点击tab2时才加载,也是出现了当你点击tab2时页面又恢复了正常。那么现在你将tabpanel加上那个属性deferredRender:false,这回问题就被解决了。
那为什么开始的那个例子没出现问题,因为加上了class="x-hide-display"就是将Another one所在的那个div隐藏了。
可以再ext中找到这个css的定义:
.x-hide-display{display:none!important;}
这一下上面的示例没有什么要说的了。
示例2:
html页面
<div id="my-tabs">
<div class="x-tab" title="Tab 1">A simple tab</div>
<div class="x-tab" title="Tab 2">Another one</div>
</div>
js代码:
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
applyTo : 'my-tabs',
activeTab : 0,
width : 300,
deferredRender : false,
autoTabs : true
});
})
试一下也没有什么问题:
这里就要提到tabpanel的另一个重要的属性:autoTabs这个属性用于说明,是否将tabpanel所在的div的内部的class为x-tab的div加载到tabpanel中。当然这里也使用了deferredRender:false,不然也不好用。
这里注意一下:示例1和示例2的markup(即html的标签的结构)是不同的,autoTabs要求markup必须是良构的,并且只能够将class="x-tab"的div加载。这就是以上两个例子的区别所在。
另外这里注意那个contentEl属性,有没有很奇怪,在示例1中那tab页根本就没有在tabpanel所在的div中,但是竟然也被加载到tabpanel里面了,这个就是contentEl的作用,它的作用相当于“抢”,就是将他所指向的dom抢过来,加载它所在的位置,如示例1中tab页在tabpanel的items中,所以它可以将tabpane外的内容放到tabpanel里面来。
以上就是我对与使用tabpanel时注意问题的一个小小总结,希望对其他学习extjs的人有所帮助,Thanks!
(以后会陆续增加其他ext widget的使用时注意问题的总结)
- 大小: 2.1 KB
- 大小: 2.5 KB
分享到:
相关推荐
NULL 博文链接:https://mstr838wind.iteye.com/blog/766860
extjs4.2.1 tabPanel刷新及关闭标签
ext的tabpanel的激活与注意事项,激活的代码实现
竖向标签TabPanel-------------------------------------------------
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
treepanel 和 tabpanel 合在一起使用,可直接使用
tapestry4.02中封装ext的TabPanel组件
TabPanel的使用,添加tab,加载页面,添加事件
EXT的扩展控件,可以实现页签面板的拖动效果
NULL 博文链接:https://wlhx.iteye.com/blog/1949444
1、Ext.TabPanel简单使用 代码:
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
NULL 博文链接:https://icyfire.iteye.com/blog/412574
ext拖拽示例,可以通过ext生成的layout自动拖拽,效果很不错的
NULL 博文链接:https://daishuanglong.iteye.com/blog/789697
ExtJS tabPanel实例ExtJS tabPanel实例
基于jquery的tabpanel,支持动态添加,支持滚动条,可内嵌iframe,支持关闭按钮,支持tab的背景图片配置, 这个是我在网上找到一个原始的版本,然后修改的,有详细注释,写了11个使用例子,基本涵盖了该组件的功能。...
html javascritp+css+tabpanel的实现
TabPanel使用autoLoad加载的页面中的js脚本没有执行 A.9. 有关grid的一些小问题 A.9.1. 如何让grid总所有的列都支持排序 A.9.2. 修改一个grid的ColumnModel和Store A.9.3. 动态为ds添加参数baseParams A.10. 有关...