Ext.tab.Panel頁簽組件的每個tab都是一個Ext.panel.Panel，一般情況會有多個tab同時存在，但是同一時刻只有一個處於激活狀態。
Ext.tab.Panel主要配置項目表：
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| activeTab | String/Number | 設置默認激活的tab也，參數為tab頁的id或索引值 |
| layout | Object | tabPanel內置的card布局 |
| minTabWidth | Number | tab標簽的最小寬度，默認為30 |
| plain | Boolean | true則不顯示TabBar的完整背景，默認為false |
| removePanelHeader | Boolean | true則通知子元素全部不渲染header標題欄，這樣可以防止子元素標題重復顯示2次，默認為true |
| tabBar | Object | 配置內置Ext.tab.TabBar的配置對象 |
| tabPosition | String | 設置頁簽按鈕的顯示位置，有效值為top和bottom，默認為top |
Ext.tab.Bar主要配置項目表：
| 配置項 | 參數類型 | 說明 |
|---|---|---|
| maxTabWidth | Number | 設置標簽按鈕的最大寬度 |
| minTabWidth | Number | 設置標簽按鈕的最小寬度 |
| plain | Boolean | true則不顯示TabBar的完整背景，默認為false |
1、通過items添加標簽頁
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.tab.Panel</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 Ext.create("Ext.tab.Panel", { 10 title: "Ext.tab.Panel示例", 11 frame: true, 12 height: 150, 13 width: 300, 14 activeTab: 1, // 默認激活第2個tab頁 15 renderTo: Ext.getBody(), 16 items: [{ 17 title: "tab標簽頁1", 18 html: "tab標簽頁1內容" 19 }, { 20 title: "tab標簽頁2", 21 html: "tab標簽頁2內容" 22 }, { 23 title: "tab標簽頁3", 24 html: "tab標簽頁3內容" 25 }, { 26 title: "tab標簽頁4", 27 html: "tab標簽頁4內容" 28 }, { 29 title: "tab標簽頁5", 30 html: "tab標簽頁5內容" 31 }, { 32 title: "tab標簽頁6", 33 html: "tab標簽頁6內容" 34 }] 35 }); 36 }); 37 </script> 38 </head> 39 <body> 40 </body> 41 </html>
效果圖：
2、動態添加標簽頁
代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title>Ext.tab.Panel</title> 5 <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> 6 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 Ext.onReady(function () { 9 var tabPanel = Ext.create("Ext.tab.Panel", { 10 title: "Ext.tab.Panel示例", 11 frame: true, 12 height: 150, 13 width: 300, 14 activeTab: 0, // 默認激活第一個tab頁 15 renderTo: Ext.getBody(), 16 items: [{ 17 title: "tab標簽頁1", 18 html: "tab標簽頁1內容" 19 }], 20 buttons: [{ 21 text: "添加標簽頁", 22 handler: addTab 23 }] 24 }); 25 26 function addTab() { 27 var index = tabPanel.items.length + 1; 28 var tab = tabPanel.add({ 29 title: "tab標簽頁" + index, 30 html: "tab標簽頁" + index + "內容", 31 closable: true // 允許關閉 32 }); 33 34 tabPanel.setActiveTab(tab); // 設置當前tab頁 35 } 36 }); 37 </script> 38 </head> 39 <body style="margin: 10px;"> 40 </body> 41 </html>
效果圖：
