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>
