Printable View
I have revised the code above with the latest tech improvements.
Thank you for sharing! It looks very interesting!
Should be "messanging" replaced with "messaging" in the title?
This is an all new version that better handles Page Life-Cycle better (per Vladimir's suggestion) and adds support to handle destroyed windows. I have also moved this project to a separate library.
Project StatusCode:// I have removed this beta implementation and posted a newer version further in the thread...
This is the first implementation I feel strongly could be a release candidate. The remaining issues relate to child control participation in layout (i.e. between Items and Content). I need help from the Ext.Net team to get this working.
Also I believe you will need version 2.4 with at least trunk updates up to 5576. Versions after 2.4.X or after 2.5 should work fine.
I have also posted an example application that tests various ways controls can be rendered/added/destroyed on different panels.
TestApp.aspx - Note this page inherits from XPage to ensure that it automatically loads Registered Controls
TestCtlDateBtn.ascxCode:<%@ Page Language="C#" EnableViewState="false" ClassName="TestApp" ViewStateMode="Disabled" Inherits="Ext.Net.Ext.XPage" %>
<%@ Import Namespace="Ext.Net.Ext" %>
<script runat="server">
protected void Page_Load( object sender, EventArgs e ) {
if( XExt.IsAjaxRequestNotRendering )
return;
// Initialize Panel2 only first time
Panel2.Items.Add( new UserControlLoader() { Path = "TestCtlDateBtn.ascx", UserControlID = "P2DateBtnUCL", ClientIDMode = System.Web.UI.ClientIDMode.Predictable } );
Panel2.AddDirectControl( "TestCtlDateBtn.ascx", "P2_DateLd_", false, null, true );
}
protected void P1Test( object sender, DirectEventArgs e ) {
}
protected void P3Test( object sender, DirectEventArgs e ) {
Panel3.AddDirectControl( "TestCtlDateBtn.ascx", "P3_Date_", true, null, true );
Panel3.AddDirectControl( "TestCtlChainLoadDate.ascx", "P3_Chain_", true, null, true );
}
protected static int p4cnt = 1; // be aware: can reset on apppool recycle
protected void P4Test( object sender, DirectEventArgs e ) {
// Render the New Account Ask Question
Panel4.AddDirectControl( "TestCtlDateBtn.ascx", "P4_Cnt_" + ( p4cnt++ ).ToString(), false, null, true );
}
protected void P5Test( object sender, DirectEventArgs e ) {
Panel5.AddDirectControl( "TestCtlChainLoadDate.ascx", "P5_ChainAndDate_", true,
uc => { ((Hidden)uc.FindControl("Hid")).Text = Panel2.ID; }
, true );
}
protected static int pDM = 1; // be aware: can reset on apppool recycle
[DirectMethod( IDMode = DirectMethodProxyIDMode.None )]
public void AddToPanel( int panel ) {
var Panel = (Ext.Net.Panel)FindControl( "Panel" + panel.ToString() );
Panel.AddDirectControl( "TestCtlDateBtn.ascx", "DirMethod_" + ( pDM++ ).ToString(), true, null, true );
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>TestApp Sample</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Development" SourceFormatting="true" DisableViewState="true" />
<ext:Viewport ID="vp" runat="server" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container ID="Row1" runat="server" Border="true" Padding="5" Flex="1" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Form Panel" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:FormPanel ID="FormP1" runat="server" >
<Items>
<ext:TextField ID="NameT1" runat="server" FieldLabel="Name" LabelAlign="Top" />
</Items>
<Buttons>
<ext:Button runat="server" Text="Save" OnDirectClick="P1Test" />
</Buttons>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="2 DateBtn Load" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:UserControlLoader runat="server" Path="TestCtlDateBtn.ascx" UserControlID="P2DateUCLEmbed" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Title="2 DateBtn Direct + Chain" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Button ID="P3Btn" runat="server" Html="Add 2 DateBtn DE" OnDirectClick="P3Test" />
</Items>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container ID="Row2" runat="server" Border="true" Flex="1" Padding="5" Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel4" runat="server" Title="Unlimited DE Add Dates" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Button runat="server" Text="Add Date" OnDirectClick="P4Test" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel5" runat="server" Title="Add Button to Add to Panel2" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Button runat="server" Text="Add Date to Both Panels" OnDirectClick="P5Test" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel6" runat="server" Title="Panel6" Border="true" Padding="5" Flex="1" Layout="VBoxLayout" AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>
TestCtlWindow.ascxCode:<%@ Control Language="C#" ClassName="TestCtlDateBtn" %>
<%@ Import Namespace="Ext.Net.Ext" %>
<script runat="server">
protected void Page_Load( object sender, EventArgs e ) {
if( XExt.IsAjaxRequestNotRendering )
return;
// Initialize only first time
Label1.Html = Label1.Html + this.ClientID;
}
protected static int wcnt = 1;
protected void Button1_DirectClick( object sender, DirectEventArgs e ) {
Label1.Append( " Launched Window" );
// Make unique id non-modal window
Page.AddDirectControl( "TestCtlWindow.ascx", "CWndw_" + this.ClientID + wcnt++.ToString(), null, true );
}
</script>
<ext:Label ID="Label1" runat="server" Html="Date+Btn: " />
<ext:DatePicker ID="Date" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Show Window" OnDirectClick="Button1_DirectClick" />
TestCtlChainLoadDate.ascxCode:<%@ Control Language="C#" ClassName="TestCtlWindow" %>
<%@ Import Namespace="Ext.Net.Ext" %>
<script runat="server">
protected void Page_Load( object sender, EventArgs e ) {
if( XExt.IsAjaxRequestNotRendering )
return;
// Initialize only first time
Label1.Html = Label1.Html + this.ClientID;
Wndw1.RemoveRegisteredControlOnDestroy( this );
}
protected void ShowAlert_DirectClick( object sender, DirectEventArgs e ) {
Label1.Append( " Launched Alert" );
X.Msg.Alert( "Alert", Button1.ClientID + " DirectClick" ).Show();
}
protected void ShowWndw_DirectClick( object sender, DirectEventArgs e ) {
Label1.Append( " Launched Window" );
X.Msg.Prompt( "Window", "Which Panel # do you wish to add TestCtlDateBtn via DirectMethod to (1-6)?", new JFunction("if(btn=='ok') App.direct.AddToPanel(input);", "btn", "input") ).Show();
}
</script>
<ext:Window ID="Wndw1" runat="server" Title="Alert" CloseAction="Destroy">
<Items>
<ext:Label ID="Label1" runat="server" Html="Date+Btn: " />
<ext:DatePicker ID="Date" runat="server" />
</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Show Alert" OnDirectClick="ShowAlert_DirectClick" />
<ext:Button ID="Button2" runat="server" Text="Show Another Window" OnDirectClick="ShowWndw_DirectClick" />
</Buttons>
</ext:Window>
More tests coming for Panel 1 & 6Code:<%@ Control Language="C#" ClassName="TestCtlChainLoadDate"
%>
<%@ Import Namespace="Ext.Net.Ext" %>
<script runat="server">
public string AddParentLoadID { get; set; }
protected void Page_Load( object sender, EventArgs e ) {
// UserControlLoader in Page Load - Load CtlDateBtn
Panel1.Items.Add( new UserControlLoader() { Path = "TestCtlDateBtn.ascx", UserControlID = "CChnDtLd_"+ClientID, ClientIDMode = System.Web.UI.ClientIDMode.Predictable } );
//Panel1.AddDirectControl( "TestCtlDateBtn.ascx", "CChnDtDE_", true, null, true ); // !! Bug with mappath
// Make button1 Visible if AddParentLoad has been assigned
if( !string.IsNullOrEmpty(Hid.Text) )
Button1.Visible = true;
}
protected void Button1_DirectClick( object sender, DirectEventArgs e ) {
var comp = (ComponentBase)Page.FindControl( Hid.Text );
comp.AddDirectControl( "TestCtlDateBtn.ascx", "SendP2_" + ClientID, false, null, true );
Context.Items.Remove("CtlID");
}
</script>
<ext:Panel ID="Panel1" runat="server" Flex="1" Frame="true" Title="Chain" Padding="5">
<Items>
<ext:Hidden ID="Hid" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Add to Another Panel" OnDirectClick="Button1_DirectClick" Visible="false" />
</Items>
</ext:Panel>
<ext:Label ID="Label1" runat="server" Html="TestCtlDateBtn" />
You can reproduce the issue by running TestApp. But you'll have to note the issue where I call AddDirectControl with items set to true. The added children in the User Control don't participate in layout correctly because of the new Component(). I need AddDirectControl( AbstractContainer Parent, ... ) to support layout of the children in the UserControl properly when items is passed with true. Note: I have updated the api above from ComponentBase Parent to AbstractContainer Parent. But currently, I am describing the issue here: http://forums.ext.net/showthread.php...kEvent()/page2
Ok, let's discuss that and find some solution first:
http://forums.ext.net/showthread.php...l=1#post123090
Okay, I posted an edit to the api above. It now properly handles layouts when items=true.
TestApp was not changed.