[CLOSED] Button to switch between panels

  1. #1

    [CLOSED] Button to switch between panels

    Hi Guys,

    I'm trying to do a layout liike a "next next finished".
    My button "Next" isn't work, I tried to use this example: https://examples2.ext.net/#/TabPanel/Basic/Show_Hide/

    Anyone has any ideia about how to do this?

    The Layout print:



    The code:
    <ext:Panel ID="Panel6" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel8" 
                                            runat="server" 
                                            Title="Page 1" 
                                            Icon="Email"
                                            StyleSpec="padding: 10px;" 
                                            Border="false">
                                            <Items>
                                                <ext:FormPanel ID="FormPanel1" runat="server" Title="Form Layout" BodyStyle="padding:15px">
                                                    <FieldDefaults LabelWidth="75" LabelPad="20" LabelSeparator="" />
                                                    <Defaults>
                                                        <ext:Parameter Name="width" Value="230" />
                                                        <ext:Parameter Name="msgTarget" Value="side" />
                                                    </Defaults>
                                                    <Items>
                                                        <ext:TextField ID="TextField1" runat="server" FieldLabel="First Name" AllowBlank="false" />
                                                    </Items>
                                                    <Buttons>
                                                        
                                                        <ext:Button ID="Button3" runat="server" Text="Next" Icon="ArrowRight" ToolTip="Next page">
                                                            <DirectEvents>
                                                                 <Click  OnEvent="BtSave" Before="#{GroupTabPanel1}.addTab(#{Panel7});" />
                                                            </DirectEvents>
                                                        </ext:Button>
                                                    </Buttons>
                                                </ext:FormPanel>
                                            </Items>    
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                                <ext:Panel ID="Panel7" runat="server">
                                    <Items>
                                        <ext:Panel ID="Panel3" 
                                            runat="server" 
                                            Title="Page 2" 
                                            Icon="Email"
                                            StyleSpec="padding: 10px;" 
                                            Border="false">
                                            <Items>
                                                <ext:FormPanel ID="FormPanel2" runat="server" Title="Form Layout" BodyStyle="padding:15px">
                                                    <FieldDefaults LabelWidth="75" LabelPad="20" LabelSeparator="" />
                                                    <Defaults>
                                                        <ext:Parameter Name="width" Value="230" />
                                                        <ext:Parameter Name="msgTarget" Value="side" />
                                                    </Defaults>
                                                    <Items>
                                                        <ext:TextField ID="TextField5" runat="server" FieldLabel="First Name" AllowBlank="false" />
                                                    </Items>
                                                    <Buttons>
                                                        <ext:Button ID="Button5" runat="server" Text="Save" />
                                                    </Buttons>
                                                </ext:FormPanel>
                                            </Items>    
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
    Attached Thumbnails Click image for larger version. 

Name:	print.JPG 
Views:	12 
Size:	10.1 KB 
ID:	17222  
    Last edited by Daniil; Dec 31, 2014 at 2:59 PM. Reason: [CLOSED]
  2. #2
    Hi @debarry,

    Please read #3:
    http://forums.ext.net/showthread.php?10205
  3. #3
    Thank you for editing the post.

    Let's start with this example.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Start(object sender, DirectEventArgs e)
        {
            this.GroupTabPanel1.SetActiveTab(1);
        }
    
        protected void Next1(object sender, DirectEventArgs e)
        {
            this.GroupTabPanel1.SetActiveTab(2);
        }
    
        protected void Next2(object sender, DirectEventArgs e)
        {
            this.GroupTabPanel1.SetActiveTab(3);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GroupTabPanel ID="GroupTabPanel1" runat="server">
                <Items>
                    <ext:Panel runat="server">
                        <Items>
                            <ext:Panel ID="Panel1" runat="server" Title="Questionnaire">
                                <Items>
                                    <ext:Button runat="server" Text="Start" OnDirectClick="Start" />
                                </Items>
                            </ext:Panel>
    
                            <ext:Panel ID="Panel2" runat="server" Title="Question 1" Layout="VBoxLayout">
                                <Items>
                                    <ext:Label runat="server" Text="Some question #1" />
                                    <ext:Button runat="server" Text="Next" OnDirectClick="Next1" />
                                </Items>
                            </ext:Panel>
    
                            <ext:Panel ID="Panel3" runat="server" Title="Question 2" Layout="VBoxLayout">
                                <Items>
                                    <ext:Label runat="server" Text="Some question #2" />
                                    <ext:Button runat="server" Text="Next" OnDirectClick="Next2" />
                                </Items>
                            </ext:Panel>
    
                            <ext:Panel ID="Panel4" runat="server" Title="Finished">
                                <Items>
                                    <ext:Label runat="server" Text="Done!" />
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:GroupTabPanel>
        </form>
    </body>
    </html>
    Please clarify do you want to add tabs (i.e. questions) dynamically?

Similar Threads

  1. Is possible to switch Store DataSourceID ?
    By Aod47 in forum 1.x Help
    Replies: 1
    Last Post: Mar 14, 2012, 4:46 AM
  2. [CLOSED] Ext.Button: Width has different sizes between panels
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 16, 2012, 4:39 AM
  3. [CLOSED] [1.2] Switch panels?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 01, 2011, 3:57 PM
  4. [CLOSED] Language switch
    By tiramisu in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Oct 15, 2010, 2:44 PM
  5. Replies: 1
    Last Post: May 28, 2010, 6:52 AM

Posting Permissions