[CLOSED] Basic TabPanel Troubles

  1. #1

    [CLOSED] Basic TabPanel Troubles

    Hi Community !

    Please check the code sample below:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    
        protected void Button1_Click(object sender, DirectEventArgs e)
        {
            FormPanel2.Reset();
            Example();
            
            Window2.Show();
        }
        protected void Example()
        {
            FormPanel3.Items.Add(new TextField
            {
                FieldLabel = "FieldLabel1"
                ,
                Name = "FieldLabel1"
                ,
                ID = "FieldLabel1"
                ,
                EnableKeyEvents = true
                ,
                Text = "FieldLabel1"
            });
    
            FormPanel3.Items.Add(new TextField
            {
                FieldLabel = "FieldLabel2"
                ,
                Name = "FieldLabel2"
                ,
                ID = "FieldLabel2"
                ,            
                EnableKeyEvents = true
                ,
                Text = "FieldLabel2"
            });
    
            FormPanel3.Items.Add(new TextField
            {
                FieldLabel = "FieldLabel3"
                ,
                Name = "FieldLabel3"
                ,
                ID = "FieldLabel3"
                ,            
                EnableKeyEvents = true
                ,
                Text = "FieldLabel3"
            });
    
            FormPanel3.Items.Add(new TextField
            {
                FieldLabel = "FieldLabel4"
                ,
                Name = "FieldLabel4"
                ,
                ID = "FieldLabel4"
                ,            
                EnableKeyEvents = true
                ,
                Text = "FieldLabel4"
            });
    
            FormPanel3.Items.Add(new TextField
            {
                FieldLabel = "FieldLabel5"
                ,
                Name = "FieldLabel5"
                ,
                ID = "FieldLabel5"
                ,            
                EnableKeyEvents = true
                ,
                Text = "FieldLabel5"
            });
    
            FormPanel3.Reset();
            FormPanel3.Render(Window2, RenderMode.AddTo);                 
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Edit Form View - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune" />
            
            <ext:Window ID="Window1" runat="server" 
                    Title="Window1"
                    Icon="ApplicationEdit"
                    Width="800" 
                    Height="400"           
                    BodyPadding="15" 
                    Resizable="false" 
                    Closable="false"
                    Layout="Fit">
                <Items>
                    <ext:FormPanel ID="FormPanel1" runat="server" 
                            Border="false" 
                            Layout="Form">
                        <Items>
                            <ext:Button ID="Button1" runat="server" Text="Open Window 2" >
                                <DirectEvents>
                                    <Click OnEvent="Button1_Click" ></Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
    
            <ext:Window ID="Window2" runat="server"
                    Title="Plain TabPanel - Ext.NET Examples"
                    Modal="true"
                    Width="350"
                    Height="220"
                    Layout="Fit"
                    Hidden="true"
                    Closable="true">
                <Items>
                    <ext:TabPanel ID="TabPanel1" runat="server">
                        <Items>
                            <ext:FormPanel ID="FormPanel2" runat="server"
                                    BodyPadding="10" Title="Tab1"
                                    DefaultAnchor="100%">
                                <Defaults>
                                    <ext:Parameter Name="Anchor" Value="95%" />
                                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                    <ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
                                    <ext:Parameter Name="MsgTarget" Value="side" />
                                </Defaults>
                                <Items>
                                    <ext:TextField ID="TextField1" runat="server" FieldLabel="Name" BlankText="Name is required" />
                                    <ext:DateField ID="DateField1" runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
                                </Items>
                            </ext:FormPanel>
                            <ext:FormPanel ID="FormPanel3" runat="server"
                                LabelWidth="75" Title="Tab2"
                                ButtonAlign="Right"
                                Border="false"
                                Padding="10">
                                <Defaults>
                                    <ext:Parameter Name="Anchor" Value="95%" />
                                    <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                    <ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
                                    <ext:Parameter Name="MsgTarget" Value="side" />
                                </Defaults>
                                <Items>
                                </Items>
                            </ext:FormPanel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    I have problems presenting / displaying the "TabPanel" control the second Tab is not displayed. I created a simple example to clarify my problem.

    Step 1. Click Button "Open Window 2"

    Click image for larger version. 

Name:	TabPanel.JPG 
Views:	23 
Size:	24.6 KB 
ID:	24745

    Step 2. Tab "2" is not displayed

    Click image for larger version. 

Name:	TabPanel 2.JPG 
Views:	26 
Size:	19.0 KB 
ID:	24746

    Step 3. Comment procedure "Example"

    Click image for larger version. 

Name:	TabPanel 3.JPG 
Views:	23 
Size:	18.1 KB 
ID:	24747

    Can you help with the code?

    I accept suggestions ideas or comments
    Last edited by fabricio.murta; Sep 20, 2016 at 10:20 PM.
  2. #2
    Hello Ext .Net!

    Please answer me ...
  3. #3
    Hello Mauricio!

    We're working on your question right now! Sorry for the delay!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    ...and hello again!

    I will tell you what to do to fix your example. If that's confuse, let us know and we'll paste a working copy.

    First, go to your line 83. Delete it completely.

    Then, in your Example() method (comprised by lines 15-84), you will change all:

    FormPanel3.Items.Add(<component_here>);

    To:

    <component_Here>.AddTo(FormPanel3);

    And, it will work just fine!

    This happens because the <outer_component>.Items.Add(<inner_component>) acts by setting up the outer component settings, as if adding the inner components to the webforms ASPX file. It works fine if done during Page_Load() or other event that renders the initial page displayed.

    As for the <inner_component>.AddTo(<outer_component>), it instantiates the inner component and calls upon it its AddTo() method to add it somewhere else. So the result is not a component initial config, but a component call script that is returned to the browser to be run!..

    This is also the reason you (rightfully) thought about re-running the component Render() method, which is essentially rebuilding the whole component, something that may not just work in every situation, and is more cumbersome. Of course there would be a way to make the render method work, but I just thought you'd prefer the simpler & faster approach of making the components and telling them to go inside the panel.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello FabrÃ*cio.

    Thanks a lot for your reply, the code line you proposed worked perfectly.

    Please close the thread.

    Saludos
    Mauricio.
  6. #6
    Glad it works for you! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] columnlayout troubles
    By tMp in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 06, 2015, 7:23 PM
  2. [CLOSED] Troubles with some Textfield
    By timiteh in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 27, 2013, 9:07 AM
  3. Troubles with Javascript during rendering
    By Paul D in forum 1.x Help
    Replies: 2
    Last Post: Nov 08, 2010, 11:15 AM
  4. [CLOSED] Help with some troubles
    By smart+ in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 09, 2010, 3:36 PM
  5. [CLOSED] [0.8.2] Notifications and js troubles.
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 20, 2010, 4:51 AM

Posting Permissions