其中content.html的代码如下代码片段&＃xff0c;下图为运行效果截图&＃xff1a;
<html xmlns&＃61;"http://www.w3.org/1999/xhtml" ><head> <title>title>
<style type&＃61;"text/css">
body{font-size:12px;}
style>head><body>TabPanel控件学习body>html>
TabPanel最灵活的是动态的创建子标签选项&＃xff0c;想了解这个创建过程的实现原理请查阅我之前写的两篇文章(本文前面有文章连接),需要注意的是不能通过同步的事件驱动去创建&＃xff0c;一但页面PostBack新创建的所有标签选项将被全部清除。如果一定要通过服务端后台代码去动态创建&＃xff0c;可使用Coolite Toolkit所提供的AjaxEvent机制。
protected void CreataTab_Click(object sender, AjaxEventArgs e)
{
var tab &＃61; new Tab("通过AjaxEvent新增Tab");
tab.TabIndex &＃61; short.Parse("11");
tab.ID &＃61; "tabID";
tab.AutoLoad.Url &＃61; "http://www.cnblogs.com";
tab.AutoLoad.NoCache &＃61; true;
tab.AutoLoad.Mode &＃61; LoadMode.IFrame;
this.tabPanel.Tabs.Add(tab);
this.tabPanel.ActiveTab &＃61; tab;
}
{
var tab &＃61; new Tab("通过AjaxEvent新增Tab");
tab.TabIndex &＃61; short.Parse("11");
tab.ID &＃61; "tabID";
tab.AutoLoad.Url &＃61; "http://www.cnblogs.com";
tab.AutoLoad.NoCache &＃61; true;
tab.AutoLoad.Mode &＃61; LoadMode.IFrame;
this.tabPanel.Tabs.Add(tab);
this.tabPanel.ActiveTab &＃61; tab;
}
<ext:Button ID&＃61;"btnCreateTab" runat&＃61;"server" Text&＃61;"动态添加子标签选项">
<AjaxEvents>
<Click OnEvent&＃61;"CreataTab_Click">
<EventMask ShowMask&＃61;"true" Msg&＃61;"正在加载
"/>
Click>
AjaxEvents>
ext:Button>
<AjaxEvents>
<Click OnEvent&＃61;"CreataTab_Click">
<EventMask ShowMask&＃61;"true" Msg&＃61;"正在加载
"/>Click>
AjaxEvents>
ext:Button>
个人觉得通过同步方式创建页面总是会晃动一下&＃xff0c;闪着让人很不爽。推荐通过客户端动态添加子标签选项的方式创建&＃xff0c;TabPanel提供了相应的客户端API来完成这些操作。
<ext:Button ID&＃61;"btnClient" runat&＃61;"server" Text&＃61;"添加Tab(Client)">
<Listeners>
<Click Handler&＃61;"addTab(#{tabPanel}, &＃39;tabCnblogs&＃39;, &＃39;http://www.cnblogs.com&＃39;);" />
Listeners>
ext:Button>
<Listeners>
<Click Handler&＃61;"addTab(#{tabPanel}, &＃39;tabCnblogs&＃39;, &＃39;http://www.cnblogs.com&＃39;);" />
Listeners>
ext:Button>
通过Javascript方法addTab()方法动态创建&＃xff0c;三个参数分别为&＃xff1a;TabPanel控件ID&＃xff0c;新创建的Tab的ID,西创建的Tab所呈现的内容路径。
<script type&＃61;"text/Javascript">
function addTab(tabPanel, id, url) {
var tab &＃61; tabPanel.getComponent(id);
if (!tab) {
tab &＃61; tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode:&＃39;iframe&＃39;,
maskMsg: &＃39;正在加载 &＃39;
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
function addTab(tabPanel, id, url) {
var tab &＃61; tabPanel.getComponent(id);
if (!tab) {
tab &＃61; tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode:&＃39;iframe&＃39;,
maskMsg: &＃39;正在加载
&＃39;}
});
}
tabPanel.setActiveTab(tab);
}
</script>
客户端创建的方式是纯Ext的操作方式&＃xff0c;TabPanel提供了API可直接获取指定id的子Tab是否存在&＃xff0c;使用这一功能就可以完美的处理互斥&＃xff0c;以创建出唯一的Tab子标签选项。
TabPanel使用得多的就是用来处理多标签选项卡&＃xff0c;另外多数时候是用作容器&＃xff0c;其容器功能和Panel、Window等基本相同。就拿上一篇文章中创建的树做示例吧&＃xff0c;现在需要将树显示在TabPanel的一个子标签选项里&＃xff0c;可以直接调用TabPanel的客户端API方法addTab将一个存在的容器类型控件添加到TabPanel&＃xff0c;使其成为TabPanel的子Tab。
Code 
京公网安备 11010802041100号