快捷導(dǎo)航

asp.net Coolite TablePanel使用

更新時(shí)間：2010年03月11日 17:23:38 作者：

TabPanel控件使用非常簡(jiǎn)單，但是功能卻非常強(qiáng)大，它同MenuPanel、TreePanel一樣提供了很多的集合屬性，可以定制出豐富的應(yīng)用。

其中用得最多的就是他的Tabs屬性，用于定義子標(biāo)簽選項(xiàng)，可參考下圖所示：

其中content.html的代碼如下代碼片段，下圖為運(yùn)行效果截圖：

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title></title> 
<style type="text/css"> 
body{font-size:12px;} 
</style> 
</head> 
<body> 
TabPanel控件學(xué)習(xí) 
</body> 
</html>

TabPanel最靈活的是動(dòng)態(tài)的創(chuàng)建子標(biāo)簽選項(xiàng)，想了解這個(gè)創(chuàng)建過(guò)程的實(shí)現(xiàn)原理請(qǐng)查閱我之前寫(xiě)的兩篇文章(本文前面有文章連接),需要注意的是不能通過(guò)同步的事件驅(qū)動(dòng)去創(chuàng)建，一但頁(yè)面PostBack新創(chuàng)建的所有標(biāo)簽選項(xiàng)將被全部清除。如果一定要通過(guò)服務(wù)端后臺(tái)代碼去動(dòng)態(tài)創(chuàng)建，可使用Coolite Toolkit所提供的AjaxEvent機(jī)制。

復(fù)制代碼代碼如下:

 
protected void CreataTab_Click(object sender, AjaxEventArgs e) 
{ 
var tab = new Tab("通過(guò)AjaxEvent新增Tab"); 
tab.TabIndex = short.Parse("11"); 
tab.ID = "tabID"; 
tab.AutoLoad.Url = "http://www.dbjr.com.cn"; 
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="動(dòng)態(tài)添加子標(biāo)簽選項(xiàng)"> 
<AjaxEvents> 
<Click OnEvent="CreataTab_Click"> 
<EventMask ShowMask="true" Msg="正在加載"/> 
</Click> 
</AjaxEvents> 
</ext:Button> 

個(gè)人覺(jué)得通過(guò)同步方式創(chuàng)建頁(yè)面總是會(huì)晃動(dòng)一下，閃著讓人很不爽。推薦通過(guò)客戶端動(dòng)態(tài)添加子標(biāo)簽選項(xiàng)的方式創(chuàng)建，TabPanel提供了相應(yīng)的客戶端API來(lái)完成這些操作。

復(fù)制代碼代碼如下:

 
<ext:Button ID="btnClient" runat="server" Text="添加Tab(Client)"> 
<Listeners> 
<Click Handler="addTab(#{tabPanel}, 'tabCnblogs', 'http://www.dbjr.com.cn');" /> 
</Listeners> 
</ext:Button> 

通過(guò)JavaScript方法addTab()方法動(dòng)態(tài)創(chuàng)建，三個(gè)參數(shù)分別為：TabPanel控件ID，新創(chuàng)建的Tab的ID,西創(chuàng)建的Tab所呈現(xiàn)的內(nèi)容路徑。

復(fù)制代碼代碼如下:

 
<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> 

客戶端創(chuàng)建的方式是純Ext的操作方式，TabPanel提供了API可直接獲取指定id的子Tab是否存在，使用這一功能就可以完美的處理互斥，以創(chuàng)建出唯一的Tab子標(biāo)簽選項(xiàng)。

TabPanel使用得多的就是用來(lái)處理多標(biāo)簽選項(xiàng)卡，另外多數(shù)時(shí)候是用作容器，其容器功能和Panel、Window等基本相同。就拿上一篇文章中創(chuàng)建的樹(shù)做示例吧，現(xiàn)在需要將樹(shù)顯示在TabPanel的一個(gè)子標(biāo)簽選項(xiàng)里，可以直接調(diào)用TabPanel的客戶端API方法addTab將一個(gè)存在的容器類(lèi)型控件添加到TabPanel，使其成為T(mén)abPanel的子Tab。