記得在去年的一個産品開發中，公司老大要我們實作多标簽頁籤的方式來呈現程式頁面，當時沒有成熟的主要架構，也沒有好的技術文章可參考，憑着自己對需求文檔上的描述了解，花了一周多時間自己吓整一通開發了一個系統主要架構出來。效果如下圖：
關于這系統主要架構的開發我也通過兩篇博文的方式分享，并提供了示例代碼下載下傳，有興趣的朋友看直接查閱這兩篇文章。
當時開發這一個東西确實耗了不少時間和精力，現在開發一個這樣的東西可以很友善快速的實作了，Coolite Toolkit所提供的TabPanel就可以友善的解決上面這種需求。
TabPanel控件使用非常簡單，但是功能卻非常強大，它同MenuPanel、TreePanel一樣提供了很多的集合屬性，可以定制出豐富的應用。其中用得最多的就是他的Tabs屬性，用于定義子标簽選項，可參考下圖所示：
其中content.html的代碼如下代碼片段，下圖為運作效果截圖：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
TabPanel控件學習
</body>
</html>
TabPanel最靈活的是動态的建立子标簽選項，想了解這個建立過程的實作原理請查閱我之前寫的兩篇文章(本文前面有文章連接配接),需要注意的是不能通過同步的事件驅動去建立，一但頁面PostBack新建立的所有标簽選項将被全部清除。如果一定要通過服務端背景代碼去動态建立，可使用Coolite Toolkit所提供的AjaxEvent機制。
protected void CreataTab_Click(object sender, AjaxEventArgs e)
{
var tab = new Tab("通過AjaxEvent新增Tab");
tab.TabIndex = short.Parse("11");
tab.ID = "tabID";
tab.AutoLoad.Url = "http://www.cnblogs.com";
tab.AutoLoad.NoCache = true;
tab.AutoLoad.Mode = LoadMode.IFrame;
this.tabPanel.Tabs.Add(tab);
this.tabPanel.ActiveTab = tab;
}
<ext:Button ID="btnCreateTab" runat="server" Text="動态添加子标簽選項">
<AjaxEvents>
<Click OnEvent="CreataTab_Click">
<EventMask ShowMask="true" Msg="正在加載
"/>
</Click>
</AjaxEvents>
</ext:Button>
個人覺得通過同步方式建立頁面總是會晃動一下，閃着讓人很不爽。推薦通過用戶端動态添加子标簽選項的方式建立，TabPanel提供了相應的用戶端API來完成這些操作。
<ext:Button ID="btnClient" runat="server" Text="添加Tab(Client)">
<Listeners>
<Click Handler="addTab(#{tabPanel}, 'tabCnblogs', 'http://www.cnblogs.com');" />
</Listeners>
通過JavaScript方法addTab()方法動态建立，三個參數分别為：TabPanel控件ID，新建立的Tab的ID,西建立的Tab所呈現的内容路徑。
<script type="text/javascript">
function addTab(tabPanel, id, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode:'iframe',
maskMsg: '正在加載
'
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
用戶端建立的方式是純Ext的操作方式，TabPanel提供了API可直接擷取指定id的子Tab是否存在，使用這一功能就可以完美的處理互斥，以建立出唯一的Tab子标簽選項。
TabPanel使用得多的就是用來處理多标簽頁籤，另外多數時候是用作容器，其容器功能和Panel、Window等基本相同。就拿上一篇文章中建立的樹做示例吧，現在需要将樹顯示在TabPanel的一個子标簽選項裡，可以直接調用TabPanel的用戶端API方法addTab将一個存在的容器類型控件添加到TabPanel，使其成為TabPanel的子Tab。
Code
本文就簡單介紹于此，更多、更高、更進階、更适用的應用需要大家的努力挖掘，歡迎廣大朋友排磚指正，互相交流學習。
本文轉自 beniao 51CTO部落格，原文連結：http://blog.51cto.com/beniao/242636，如需轉載請自行聯系原作者