PDA

View Full Version : [CLOSED] How to create tab control from direct event



huannv
Jan 26, 2015, 9:37 AM
Dear supporter,

I created a tabpanel with an user control from button in TapPanel.aspx by direct event, but other direct event from user control ElementChooser.ascx is not worked (if tab panel added from page_load is ok)
Here my sample, please help me to fix
1. TabPanel.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TabPanel.aspx.cs" Inherits="WebApplication1.TabPanel" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="~/ElementChooser.ascx" TagPrefix="uc" TagName="Chooser" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Adding Tabs On The Fly - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//Ext.Net.Panel panel = new Ext.Net.Panel
//{
// Title = "New Tab",
// Closable = true,
// Items = {
// new UserControlLoader{
// Path="ElementChooser.ascx",
// UserControlID="Chooser2",
// }
// }
//};

//TabPanel1.Add(panel);
}

protected void addTabDirect(object sender, Ext.Net.DirectEventArgs e) {
Ext.Net.Panel panel = new Ext.Net.Panel
{
Title = "New Tab",
Closable = true,
Items = {
new UserControlLoader{
Path="ElementChooser.ascx",
UserControlID="Chooser2",
}
}
};

TabPanel1.Add(panel);
panel.Render(true);
}

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Button ID="button001" runat="server" Text="Add tab button">
<DirectEvents>
<Click OnEvent="addTabDirect"></Click>
</DirectEvents>
</ext:Button>
<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="700"
Height="500"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" >
<%--<Items>
<ext:Panel ID="childPanel01" runat="server" Title="hello">
<Content>
<uc:Chooser ID="Chooser2" runat="server" />
</Content>
</ext:Panel>
</Items>--%>
</ext:TabPanel>
</Items>
</ext:Window>
</form>
</body>
</html>

2. ElementChooser.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ElementChooser.ascx.cs" Inherits="WebApplication1.ElementChooser" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
[DirectMethod]
public void showMessage1()
{
X.Msg.Alert("Message box", "Hello message 1").Show();
}
</script>

<ext:Button ID="button01" runat="server" Text="my Button">
<Listeners>
<Click Handler ="ShowMessageTest();"></Click>
</Listeners>
</ext:Button>

<ext:DataView ID="DataView1" runat="server"
TrackOver="true"
ItemSelector=".x-newtab-item"
OverItemCls="x-newtab-over-item">
<Tpl>
<Html>
<tpl for=".">
<div class="x-newtab-item">
<h1>{name}</h1>
</div>
</tpl>
</Html>
</Tpl>
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:DataView>

<script type="text/javascript" >
function ShowMessageTest() {
App.direct.Chooser2.showMessage1();
}
</script>

Too many thanks !

Dimitris
Jan 26, 2015, 2:09 PM
Hi,

The following example is based on the excellent solution (http://forums.ext.net/showthread.php?24506-2-2-Store-name-is-undefined-when-ascx-is-loaded&p=107614&viewfull=1#post107614) by @ltctech. The important thing to know is that dynamically created asp.net (user) controls have to be re-created in each and every page request.

Please, note that you can further simplify the code if you only need one dynamic tab by hard coding the ID (instead of using GUIDs) and simply recreate it on each page load.


TabPanel.aspx



<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<%@ Register Src="ElementChooser.ascx" TagName="ChooserTab" TagPrefix="chooser" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>Adding Tabs On The Fly - Ext.NET Examples</title>

<script runat="server">
private class ChooserTab
{
public tabpanel_elementchooser_ascx Chooser { get; set; }
public FormPanel Tab { get; set; }
}

private List<Guid> CurrentTabIDs
{
get { return !string.IsNullOrWhiteSpace(hidCurrTabIDs.Text) ? JSON.Deserialize<List<Guid>>(hidCurrTabIDs.Text) : new List<Guid>(); }
set { hidCurrTabIDs.Text = JSON.Serialize(value); }
}

protected void Page_Load(object sender, EventArgs e)
{
CurrentTabIDs.ForEach(x => CreateTabControls(x));
}

private ChooserTab CreateTabControls(Guid tabID)
{
FormPanel tab = new FormPanel();
tab.Layout = "FormLayout";
string cID = string.Format("tab{0:N}", tabID);
tab.ID = cID;
tab.Title = cID;
TabPanel1.Items.Add(tab);

tabpanel_elementchooser_ascx chooser = (tabpanel_elementchooser_ascx)this.LoadControl(@"ElementChooser.ascx");
chooser.ID = string.Format("chooser{0:N}", tabID);
tab.ContentControls.Add(chooser);
return new ChooserTab() { Chooser = chooser, Tab = tab };
}

private void CreateTab()
{
Guid newtabID = Guid.NewGuid();

List<Guid> tabIDs = CurrentTabIDs;
tabIDs.Add(newtabID);
CurrentTabIDs = tabIDs;

ChooserTab chooserTab = CreateTabControls(newtabID);
chooserTab.Tab.Render();
TabPanel1.SetActiveTab(chooserTab.Tab);
}

protected void addTabDirect(object sender, DirectEventArgs e)
{
CreateTab();
}
</script>
</head>
<body>
<form id="frm" runat="server">

<ext:ResourceManager ID="rsMan" runat="server" />

<ext:Button ID="button001" runat="server" Text="Add tab button">
<DirectEvents>
<Click OnEvent="addTabDirect"></Click>
</DirectEvents>
</ext:Button>

<ext:Window ID="Window1"
runat="server"
Title="Adding tab"
Width="500"
Height="200"
Icon="Link"
Layout="BorderLayout">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center" >
</ext:TabPanel>
</Items>
</ext:Window>

<ext:Hidden ID="hidCurrTabIDs" runat="server" />

</form>
</body>
</html>



ElementChooser.ascx



<%@ Control Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
[DirectMethod]
public void showMessage1()
{
X.Msg.Alert("Message box", "Hello message 1").Show();
}
</script>

<ext:Button ID="button01" runat="server" Text="my Button">
<Listeners>
<Click Handler ="#{DirectMethods}.showMessage1();"></Click>
</Listeners>
</ext:Button>

huannv
Jan 29, 2015, 8:24 AM
Great. thank you for the information. Please close thread.
thanks