Hi,
Please see the sample
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!X.IsAjaxRequest)
{
this.BuildSummaryTabs();
}
}
protected void BuildSummaryTabs()
{
if(X.IsAjaxRequest)
{
SubTabs.Call("removeAll");
}
SubTabs.AddItem(new TabStripItem("Summary #1"));
SubTabs.AddItem(new TabStripItem("Summary #2"));
SubTabs.AddItem(new TabStripItem("Summary #3"));
}
protected void BuildDataTabs()
{
if (X.IsAjaxRequest)
{
SubTabs.Call("removeAll");
}
SubTabs.AddItem(new TabStripItem("Data #1"));
SubTabs.AddItem(new TabStripItem("Data #2"));
SubTabs.AddItem(new TabStripItem("Data #3"));
}
protected void ChangeSubTabs(object sender, DirectEventArgs e)
{
if(MainTabs.ActiveTabIndex == 0)
{
this.BuildSummaryTabs();
}
else
{
this.BuildDataTabs();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager" runat="server" />
<ext:Panel
runat="server"
Height="185"
Width="500">
<TopBar>
<ext:Toolbar runat="server" Layout="HBoxLayout">
<Items>
<ext:TabStrip ID="MainTabs" runat="server">
<Items>
<ext:TabStripItem Title="Summary" />
<ext:TabStripItem Title="Data" />
</Items>
<DirectEvents>
<TabChange OnEvent="ChangeSubTabs">
<EventMask ShowMask="true" Target="This" />
</TabChange>
</DirectEvents>
</ext:TabStrip>
<ext:ToolbarSpacer runat="server" Width="10" />
<ext:TabStrip ID="SubTabs" runat="server" Flex="1" EnableTabScroll="true" AutoGrow="false">
<Items>
<ext:TabStripItem Title="Tab #1" />
<ext:TabStripItem Title="Tab #2" />
<ext:TabStripItem Title="Tab #3" />
<ext:TabStripItem Title="Tab #4" />
<ext:TabStripItem Title="Tab #5" />
</Items>
</ext:TabStrip>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>
