[CLOSED] TabPanel and Closable
Hello,
The following examples fails:
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Tab2_Close(object sender, AjaxEventArgs e)
{
lblResult.Text = "Tab2 closed, hurray!";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="True" />
<ext:ScriptManager runat="server" ScriptMode="Debug" />
<ext:TabPanel runat="server">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Content 1">
<Content>
Content 1
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Closable="True" Title="Content 2">
<Content>
Content 2
</Content>
<AjaxEvents>
<Close OnEvent="Tab2_Close" />
</AjaxEvents>
</ext:Tab>
</Tabs>
</ext:TabPanel>
<ext:Label ID="lblResult" runat="server" Text="Waiting ..." />
</form>
</body>
</html>
Replication steps:
1. Load page
2. Click "X" on Tab 2
3. Notice it closes, no AjaxEvent called
Cheers,
Timothy
RE: [CLOSED] TabPanel and Closable
Hi Timothy,
The Tabs don't support directly Close event (it is ExtJS original behaivor) . I can sugest next solution for you:
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Tab2_Close(object sender, AjaxEventArgs e)
{
lblResult.Text = "Tab2 closed, hurray!";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />
<ext:ScriptManager ID="ScriptManager2" runat="server" ScriptMode="Debug" />
<ext:TabPanel ID="TabPanel1" runat="server">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Content 1" Closable="True">
<Content>
Content 1
</Content>
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Closable="True" Title="Content 2">
<Content>
Content 2
</Content>
</ext:Tab>
</Tabs>
<AjaxEvents>
<BeforeRemove OnEvent="Tab2_Close" Before="return params[1].id == #{Tab2}.id;"></BeforeRemove>
</AjaxEvents>
</ext:TabPanel>
<ext:Label ID="lblResult" runat="server" Text="Waiting ..." />
</form>
</body>
</html>
As you can see I handle BeforeRemove event of TabPanel and check what component (params[1]) was closed
RE: [CLOSED] TabPanel and Closable
Awesome vlad, would be a nice addition, but great suggestion! :)
Cheers,
Timothy
