Ext.TabPanel是一種基礎性的tab容器。Tab面板可用像標準Ext.Panel一樣參與佈局，亦可將多個面板歸納爲一組tabs之特殊用途。這裏沒有單獨而設的tab類—，每一張tab便是一個Ext.Panel。然而，在當Panel放進TabPanel裏面的時候，它作爲子面板渲染的同時會額外增加若干事件，而這些事件一般的Panel是沒有的。
TabPanel的示例：
tabpanel.js
// tabpanel的使用
Ext.onReady(function() {
var tabpanel = new Ext.TabPanel({
// 指定當前活動的選項面板是第一個
activeTab : 0,
// 指定選項卡在什麼位置
// tabPosition : "bottom",
// 指定底部工具欄
bbar : [ {
text : "添加選項",
}, {
text : "刪除選項"
} ],
items : [ {
title : "面板一",
html : "this is tab1",
}, {
title : "面板二",
autoLoad : "news.jsp"
}, {
title : "面板三",
autoLoad : "news.jsp",
closable : true
} ]
});
new Ext.Viewport({
// fit佈局表示充滿整個viewport
layout : "fit",
items : tabpanel
});
/*
* var tabs = new Ext.TabPanel({ renderTo: Ext.getBody(), activeTab: 0,
* items: [{ title: 'Tab 1', html: 'A simple tab' },{ title: 'Tab 2', html:
* 'Another one' }] });
*/
});
tabpanel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-TabPanel的使用</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="tabpanel.js"></script>
</head>
<body>
</body>
</html>