Mar 07, 2012, 9:08 PM
Then the ClientIDs will be different from IDs. There must be ClientIDs.
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Toogle1(object sender, DirectEventArgs e)
{
X.Js.Call("toggle", this.GroupTabPanel1.ClientID + "__" + this.GroupTab1.ClientID);
// or
// X.Fly(this.GroupTabPanel1.ClientID + "__" + this.GroupTab1.ClientID).ToggleClass("x-hide-display");
}
protected void Toogle2(object sender, DirectEventArgs e)
{
X.Js.Call("toggle", this.GroupTabPanel1.ClientID + "__" + this.GroupTab2.ClientID);
// or
// X.Fly(this.GroupTabPanel1.ClientID + "__" + this.GroupTab2.ClientID).ToggleClass("x-hide-display");
}
</script>
<!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 runat="server">
<title>Ext.NET Example</title>
<script type="text/javascript">
var toggle = function (groupTabId) {
Ext.fly(groupTabId).toggleClass("x-hide-display");
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>
<DocumentReady Handler="toggle('GroupTabPanel1__GroupTab2');" />
</Listeners>
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="West" Width="150">
<Items>
<ext:Button runat="server" Text="Toogle 1 (client side)">
<Listeners>
<Click Handler="toggle('GroupTabPanel1__GroupTab1');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Toogle 2 (client side)">
<Listeners>
<Click Handler="toggle('GroupTabPanel1__GroupTab2');" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Toogle 1 (server side)" OnDirectClick="Toogle1" />
<ext:Button runat="server" Text="Toogle 2 (server side)" OnDirectClick="Toogle2" />
</Items>
</ext:Panel>
<ext:GroupTabPanel
ID="GroupTabPanel1"
runat="server"
Region="Center"
ActiveGroupIndex="0"
TabWidth="150">
<Groups>
<ext:GroupTab ID="GroupTab1" runat="server">
<Items>
<ext:Panel runat="server" Title="GroupTab1 Tab1" Html="GroupTab1 Tab1" />
<ext:Panel runat="server" Title="GroupTab1 Tab2" Html="GroupTab1 Tab2" />
</Items>
</ext:GroupTab>
<ext:GroupTab ID="GroupTab2" runat="server">
<Items>
<ext:Panel runat="server" Title="GroupTab2 Tab1" Html="GroupTab2 Tab1" />
<ext:Panel runat="server" Title="GroupTab2 Tab2" Html="GroupTab2 Tab2" />
</Items>
</ext:GroupTab>
</Groups>
</ext:GroupTabPanel>
</Items>
</ext:Viewport>
</body>
</html>