Ext.js入门：TabPanel组件（八）
一：TabPanel组件简介
二：简单代码示例
三：使用iframe作为tab的标签页内容
四：动态添加tabpanel的标签页
五：为tabpanel标签页添加右键菜单
方式一：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var mytable = new Ext.TabPanel({
renderTo: Ext.getBody(),
width: 200,
activeTab: 0,//激活的页数
frame: true, //出现渲染的边框
items: [
{
title:"tab1",
html:"tab1 content"
},
{
title:"tab2",
html:"tab2 content"
}
]
});
})
</script>
</head>
<body>
</body>
</html>
方式二：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
width:200,
items: [
{ contentEl: 'tab1', title: 'aaa' },
{ contentEl: 'tab2', title: 'bbb' }
]
});
});
</script>
</head>
<body>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
</div>
效果：
几个相关参数
1.tabPosition:“bottom”//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:“提示”//必须先调用Ext.QuickTips.init();才有效果
1.tabPosition:“bottom”//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)
2.tabTip:“提示”//必须先调用Ext.QuickTips.init();才有效果
3、经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).
就是:使用iframe作为tab的标签页内容.
就是:使用iframe作为tab的标签页内容.
代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var testTab = new Ext.TabPanel({
renderTo: Ext.getBody(),
width: "100%",
height:500,
activeTab: 0,
frame: true,
items: [
{
contentEl:"mainFrame",
tabTip:"fengjian",
title:"加载页面的标签页",
closable: true
}
]
});
});
</script>
</head>
<body style="margin:10px;">
<div>
<a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">换成博客园</a>
<iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="500px" width="100%" ></iframe>
</div>
</body>
</html>
点击添加新的页面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var index = 0;
var tabsDemo = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 700,
frame: true,
items: [
{
title: "autoLoad为html简单页面演示",
autoLoad: { url: "Tab1.aspx", scripts: true }
}
]
});
Ext.get("AddNewTab").on("click", function() {
tabsDemo.add({
title: "newtab" + index,
id: "newtab" + index,
html: "new tab" + index,
closable: true
});
tabsDemo.setActiveTab("newtab" + index);
index++;
//alert(index);
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
aaaaaaaaaaaaaa
</div>
</form>
</body>
</html>
为tabpanel标签页添加右键菜单
//几个参数说明
1.enableTabScroll:true//前面已经说过了
2. listeners:{“contextmenu”:function(参数1,参数2,参数3){.}}
//右键菜单事件，三个参数分别为当前tabpanel，当前标签页panel，事件对象e
每个标签页都有激活和去激活事件
activate和deactivate，他们的执行函数有个参数，就是当前标签页。
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var index = 0;
function addTab() {
tabsDemo.add({
title: "tab" + index,
id: "newtab" + index,
html: "new tab " + index,
closable: true
});
tabsDemo.setActiveTab("newtab" + index);
index++;
}
var tabsDemo = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 200,
enableTabScroll: true,
frame: true,//透明度
items: [{ //监听右键菜单 传递的参数：1.TabPanel 2.每一项的值 3.事件
title: "首页",
html: "first Page"
}],
listeners: {
"contextmenu": function(tdemo, myitem, e) {
menu = new Ext.menu.Menu([
{
text: "关闭当前页",
handler: function() {
tdemo.remove(myitem);
}
},
{
text: "关闭其他所有页",
handler: function() {
tdemo.items.each(function(item) {
if (item.closable && item != myitem) {
tdemo.remove(item);
}
});
}
},
{
text: "新建标签页",
handler: addTab
}
]);
menu.showAt(e.getPoint());
}
}
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="AddNewTab">添加新页面</a>
</body>
</html>
效果图：
