摘要鏈接：http://www.cn-java.com/www1/?uid-551263-action-viewspace-itemid-4286
這份教程目的在於對TabPanel類進行一次快速介紹。所提及的知識都是來自我對TabPanel範例、Ext源碼和API文檔的學習。到本文最後，你應該完成好一個Tab Panel，這個TabPanel能夠：
- 創建新tab，其內容來自一個URL。
- 判斷某個tab是否存在，有的話加載新內容。
![]()
Step
1: 創建 HTML 骨架
我們將會用下列HTML，和Ext一齊構建一個基本的結構。複製這些內容到一個叫tptut.heml的文件，並要求是運行在服務端的，當然 也要保證ext-all.css, ext-base.js, 和 ext-all.js這些Ext安裝路徑的正確。然後按照以下步驟創建tab_actions.js:
<html>
<head>
<title>TabPanel教程</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css" href="../include/ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="../include/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/ext2/ext-all.js"></script>
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<style>
#actions li {
margin:.3em;
}
#actions li a {
color:#666688;
text-decoration:none;
}
</style>
</head>
<body>
<ul id="actions" class="x-hidden">
<li>
<a id="use" href="#">Use Existing Tab</a>
</li>
<li>
<a id="create" href="#">Create New Tab</a>
</li>
</ul>
<div id="tabs"></div>
</body>
</html>以上代碼有兩個地方的元素需要注意。我們將使用"actions"(動作列表)這種簡易的實現來執行tab的創建。"tabs"的那個div將用於Tab面板中第一個默認tab的容器。
![]()
Step
2: Ext結構的構建
在剛纔那個目錄中創建一個文文件。就叫做作tab_actions.js，加入下面JavaScript.
Ext.onReady(function(){ // 包含actions的菜單 var tabActions = new Ext.Panel({ frame.:true, title: 'Actions', collapsible:true, contentEl:'actions', titleCollapse: true }); // 保持actions菜單的父面板 var actionPanel = new Ext.Panel({ id:'action-panel', region:'west', split:true, collapsible: true, collapseMode: 'mini', width:200, minWidth: 150, border: false, baseCls:'x-plain', items: [tabActions] }); // 主面板（已有tab） var tabPanel = new Ext.TabPanel({ region:'center', deferredRender:false, autoScroll: true, margins:'0 4 4 0', activeTab:0, items:[{ id:'tab1', contentEl:'tabs', title: 'Main', closable:false, autoScroll:true }] }); // 配置視圖viewport viewport = new Ext.Viewport({ layout:'border', items:[actionPanel,tabPanel]}); });
上面的代碼被套上一個Ext.onReady的函數,以防止頁面元素未全部加載就執行代碼了。接着要做的事情是將我們的動作列表（Action list）轉換到名字爲tabActions的那個面板，該命名是由contentEl (content element)（內容元素）這個配置項參數所指定的。
接着，創建一個父面板actionPanel來保持菜單面板。我們已tabActions 作爲一個item項的參數。由於actionPanel會由視圖Viewport的LayoutManager來頁面定位，所以我們須在配置項對象中指定一個區域。
第三個步驟是創建TabPanel(Tab面板)本身。我們想在頁面居中，即是對應於視圖的中部。還要將一系列的tab配置項對象參數傳入到面板中。在這裏例子中,參與內置渲染的只有一個tab，但是多個也是可以的。如能確定每個面板在頁面上能夠被當作容器使用，便可以成爲該數組的元素。像當前的情況，我們是把tabs作爲第一個面板的內容元素。 要注意，我們這指出了tab的Id。這就是我們稍後獲取的tab的依據。
最後，我們設置視圖， 用於瀏覽器可視區域的控制。 所需要做的就是指定一個佈局（layout）和什麼要顯示的組件。組件已經由視圖的LayoutMangager（視圖管理器）配置好適合放置的區域。
這時，你應該在瀏覽器觀察到，包含Acitons菜單的兩個格式化列在左邊，tab面板佔據了屏幕的其餘位置。
![]()
Step
3: 創建Tab控制邏輯
現在我們所需的元素已經創建好了， 可以增加Tab面板的創建（creating）和更新（updating）方法。 在當前目錄中新建三個頁面以便我們的測試：
- loripsum.html
- sample0.html
- sample1.html
這三分文件的實際內容無關緊要， 但最好是每份的內容應該有所不同，好讓tab加載內容後區別開來。
打開tab_actions.js，在viewport創建的位置插入下列代碼：
// 在中間的面板加入tab function addTab(tabTitle, targetUrl){ tabPanel.add({ title: tabTitle, iconCls: 'tabs', autoLoad: {url: targetUrl, callback: this.initSearch, scope: this}, closable:true }).show(); } // 更新tab內容，如不存在就新建一個 function updateTab(tabId,title, url) { var tab = tabPanel.getItem(tabId); if(tab){ tab.getUpdater().update(url); tab.setTitle(title); }else{ tab = addTab(title,url); } tabPanel.setActiveTab(tab); } // 映射連接的id到函數 var count = 0; var actions = { 'create' : function(){ addTab("New Tab",'loripsum.html'); }, 'use' : function(){ // 演示頁之間的輪換 updateTab('tab1','替換' + count + ' 次','sample'+(count%2)+'.html'); count++; } }; function doAction(e, t){ e.stopEvent(); actions[t.id](); } // body初始化後，viewport setup過後才能執行下面的代碼 actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});
函數addTab(...) 需要標題title和URL字符串兩個參數，然後傳遞到tabPanel.add(...)裏的配置項對象。 這會返回創建好的面板對象，上面的代碼立即調用了show()方法顯示內容。
函數updateTab(...) 需要多個tabId的參數，以便能檢測這個tab是否存在。如果是，面板會獲取Updater進行面板內容的更新。若然不是，會調用addTab(...)創建tab。
最後一個步驟， 增加一個actionPanel的監聽器，來響應選區動作之後的事件後，執行相應的函數。先要說明的是，actions是一創建好的對象，對象可被認爲是一種哈希表（HashTable）或是字典（Dictionary），一一映射了動作和方法兩者。注意“鍵key”對應於HTML list項。 由於方法比較簡單，我們就直接這裏寫好了。變量counter用於清晰顯示tab之間的切換，沒有其他特定的功能。
事件處理器（event handler）doAction(...)執行時會有兩個參數傳入：事件對象和目標對象，actions函數查找目標對象的id然後執行相應的方法。 當任意一個actionPanel's的組件被按下，將會觸發mousedown的事件，偵聽器立即通知已登記的事件處理器doAction(...)運行。
被按下的那個組件便是事件對象的目標。