ExtJs2.0学习系列(9)--Ext.TabPanel之第一式

最新推荐文章于 2023-01-12 10:37:21 发布

zhaohanjiangit

最新推荐文章于 2023-01-12 10:37:21 发布

阅读量114

点赞数

分类专栏： ext2.x 文章标签： EXT HTML

本文链接：https://blog.csdn.net/zhaohanjiangit/article/details/83392298

版权

ext2.x 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

大家好,接着介绍extjs的基础吧,Tabpanel组件大家喜欢吧!
(暂放首页2个小时.)
照旧,看个最简单的先,后面再详细说复杂的!
效果图片:

js代码:

Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
width:300,
activeTab:0,//当前激活标签
frame:true,
items:[{
contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)
title:"***",
closable:true//是否现实关闭按钮,默认为false
},{
contentEl:"tabTwo",
title:"博客园兄弟们可好"
}]
});
});html代码:
<body style="margin:10px;">
<div>
<div id="tabOne" class="x-hide-display">i am tabOne!</div>
<div id="tabTwo" class="x-hide-display">i am tabTwo!</div>
</div>
</body>
在这里例举几个参数:
//几个相关参数
1.tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果
经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用iframe作为tab的标签页内容.
1.用iframe加载其他完整页面的tabpanel.
效果图:

点击链接"换成博客园",

html代码:

<body style="margin:10px;">
<div>
<a href="javascript:void(0)" οnclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a>
<iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="100%" width="100%" style="overflow:hidden;"></iframe>
</div>
</body>js代码:
Ext.onReady(function(){
var tabsDemo=new Ext.TabPanel({
renderTo:Ext.getBody(),
activeTab:0,
height:700,//当用viewport布局时,这个height可以省去
frame:true,
items:[{
contentEl:"mainFrame",
tabTip:"fengjian",
title:"加载页面的标签页",
closable:true
}]
});
});
今天的内容简单.就暂且说做到了这里,下篇中我们说说tabpanel的滚动标签和动态添加标签的tabpanel!

敬请期待!

zhaohanjiangit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs2.0学习系列(9)--Ext.TabPanel之第一式

大家好,接着介绍extjs的基础吧,Tabpanel组件大家喜欢吧!(暂放首页2个小时.)照旧,看个最简单的先,后面再详细说复杂的!效果图片:js代码:Ext.onReady(function(){ var tabsDemo=new Ext.TabPanel({ renderTo:Ext.getBody(), ...
复制链接

扫一扫