[CLOSED] Example of dynamic window with form from Client Side, created on Server Side

  1. #1

    [CLOSED] Example of dynamic window with form from Client Side, created on Server Side

    Hi,

    I'd like to be able to call a [DirectMethod] from the clients side, have it generate a window with a dynamic form on the server-side, then show the window on the client. right now, the window is showing, but there are no fields?!

    Is this possible? Can you show me a quick example?

    Client Code Call to method.:

    <ext:XScript runat="server">
    <script>
        var intervalId
        function OpenTaskModal(title, assignid, taskid, worklfowid, soeid, userid) {
            try {
    
                #{DirectMethods}.ShowTaskWindow(title, assignid, taskid, worklfowid, soeid, userid);
     
            }
            catch (e) {
                alert(e);
            }
        } 
    
    </script> 
    </ext:XScript>
    Client Code Window to be populated then shown.:

    <ext:Window runat="server" ID="winTask" Shadow="Drop" ShadowOffset="15" Modal="true" InitCenter="true" Hidden="true">
     <Content>
     <ext:FormPanel runat="server" ID="formPanelTask">
     <Content>
      <ext:FormLayout runat="server" ID="formLayoutTask">
     
     
     </ext:FormLayout>
     </Content> 
     </ext:FormPanel>
     
    
     
     </Content>
     <BottomBar>
     <ext:Toolbar runat="server" ID="taskToolbar">
     <Items>
    <ext:ToolbarFill />
     <ext:Button runat="server" ID="btnComplete" Icon="Accept" Text="Complete Task"></ext:Button>
     
     </Items>
     </ext:Toolbar>
     
     </BottomBar>
    </ext:Window>
    Server code:

    [DirectMethod]
    public void ShowTaskWindow(string title, string assignid, string taskid, string worklfowid, string soeid, string userid)
    { 
        this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = taskid }));
        this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = soeid }));
        this.formLayoutTask.Anchors.Add(new TextField(new TextField.Config() { AllowBlank = true, Text = userid }));
        this.formLayoutTask.Anchors.Add(new  TextField(new TextField.Config() {AllowBlank=true, Text=title}));
        this.formLayoutTask.Anchors.Add(new Checkbox (new Checkbox.Config() {  Checked = true }));
    
        this.winTask.Hidden = false;
    }
    -Raphael
  2. #2

    RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side

    Hi Raphael,

    Here's how I would build your sample.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        [DirectMethod]
        public void AddFields(string name, string premium)
        {
            this.Window1.Show();
    
            var form = new FormPanel { 
                ID = "FormPanel1",
                RenderFormElement = false,
                Border = false,
                DefaultAnchor = "100%",
                Padding = 5
            };
            
            form.Items.Add(new TextField { AllowBlank = true, FieldLabel = name });
            form.Items.Add(new Checkbox { Checked = true, FieldLabel = premium });
    
            form.Render(this.Window1, RenderMode.AddTo);
        }
    </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>Json.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
        
            <script type="text/javascript">
                var addFields = function (name, premium) {
                    CompanyX.AddFields(name, premium);
                };
            </script> 
    
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Shadow="Drop" 
                ShadowOffset="15" 
                Modal="true" 
                InitCenter="true"
                Hidden="true"
                Height="185"
                Width="350"
                Layout="fit">
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill />
                            <ext:Button runat="server" Icon="Accept" Text="Complete Task" />
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Window>
    
            <ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
            
        </form>    
    </body>
    </html>
    I had to simplify your sample a bit, although all the same/similar pieces are still there.

    Summary:

    1. Use <Items> instead of <Content> if adding Ext.NET Components to your Container.

    2. I built the full FormPanel in the DirectMethod.

    3. Call .Render when you're ready to render your component during a DirectEvent/DirectMethod. The .Render Method must be called.

    Hope this helps.

    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side

    Great, thanks!

    What is the equivalent of:

    this.Page.ClientScript.RegisterStartupScript ???
  4. #4

    RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side

    As a follow up to this Geoffrey,
    How can I submit this dynamically generated form to obtain the values a user entered?

  5. #5

    RE: [CLOSED] Example of dynamic window with form from Client Side, created on Server Side

    Hi,

    1. The simplest way to read from Request object
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        [DirectMethod]
        public void AddFields(string name, string premium)
        {
            this.Window1.Show();
    
            var form = new FormPanel { 
                ID = "FormPanel1",
                RenderFormElement = false,
                Border = false,
                DefaultAnchor = "100%",
                Padding = 5
            };
    
            form.Items.Add(new TextField { ID = "TextField1", AllowBlank = true, FieldLabel = name });
            form.Items.Add(new Checkbox { Checked = true, FieldLabel = premium });
    
            form.Render(this.Window1, RenderMode.AddTo);
        }
        
        protected void ShowValues(object sender, DirectEventArgs e)
        {
            X.Js.Alert(this.Request["TextField1"]);
        }
    </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>Json.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
        
            <script type="text/javascript">
                var addFields = function (name, premium) {
                    CompanyX.AddFields(name, premium);
                };
            </script> 
    
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Shadow="Drop" 
                ShadowOffset="15" 
                Modal="true" 
                InitCenter="true"
                Hidden="true"
                Height="185"
                Width="350"
                Layout="fit">
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill />
                            <ext:Button runat="server" Icon="Accept" Text="Complete Task" />
                            <ext:Button runat="server" Text="Show values">
                                <DirectEvents>
                                    <Click OnEvent="ShowValues" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Window>
    
            <ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
            
        </form>    
    </body>
    </html>
    2. Or recreate from on each request. In this case the controls will read submitted values automaticvally
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            object restore = this.ViewState["restoreForm"];
            if(restore != null &amp;&amp; (bool)restore)
            {
                this.Window1.Items.Add(this.CreateForm("", ""));
            }
        }
        
        private FormPanel CreateForm(string name, string premium)
        {
            var form = new FormPanel
            {
                ID = "FormPanel1",
                RenderFormElement = false,
                Border = false,
                DefaultAnchor = "100%",
                Padding = 5
            };
    
            form.Items.Add(new TextField { ID = "TextField1", AllowBlank = true, FieldLabel = name });
            form.Items.Add(new Checkbox { ID = "Checkbox1", Checked = true, FieldLabel = premium });
    
            return form;
        }
        
        [DirectMethod(ViewStateMode = ViewStateMode.Enabled)]
        public void AddFields(string name, string premium)
        {
            this.Window1.Show();
            var formPanel = this.CreateForm(name, premium);
            this.Window1.Items.Add(formPanel);
            formPanel.Render();
            this.ViewState["restoreForm"] = true;
        }
    
        protected void ShowValues(object sender, DirectEventArgs e)
        {
            X.Js.Alert(Ext.Net.Utilities.ControlUtils.FindControl<TextField>(Window1, "TextField1").Text);
        }
    </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>Json.NET Example</title>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" DirectMethodNamespace="CompanyX" />
        
            <script type="text/javascript">
                var addFields = function (name, premium) {
                    CompanyX.AddFields(name, premium);
                };
            </script> 
    
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Shadow="Drop" 
                ShadowOffset="15" 
                Modal="true" 
                InitCenter="true"
                Hidden="true"
                Height="185"
                Width="350"
                Layout="fit">
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill />
                            <ext:Button runat="server" Icon="Accept" Text="Complete Task" />
                            <ext:Button runat="server" Text="Show values">
                                <DirectEvents>
                                    <Click OnEvent="ShowValues" />
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Window>
    
            <ext:Button runat="server" Text="Add Fields" OnClientClick="addFields('Name', 'Premium');" />
            
            
        </form>    
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Replies: 8
    Last Post: Feb 09, 2012, 5:33 PM
  2. Replies: 3
    Last Post: Dec 26, 2011, 2:32 PM
  3. [CLOSED] Change toggle state form server or client side
    By caha76 in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 19, 2011, 9:46 PM
  4. Replies: 1
    Last Post: Dec 01, 2010, 6:14 PM
  5. Close window - client and server side
    By Hanza in forum 1.x Help
    Replies: 1
    Last Post: Aug 23, 2010, 3:00 PM

Posting Permissions