[CLOSED] Using Layout accordion card showing all Panels every time

  1. #1

    [CLOSED] Using Layout accordion card showing all Panels every time

    Hi,

    I've tryed Accordion card layout and it's don't work like supposed
    my code:

    .aspx:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register TagPrefix="uc1" TagName="UserControl" src="~/controls/UserControl.ascx" %>
    <script runat="server">
        protected void Next_Click(object sender, DirectEventArgs e)
        {
            int index = int.Parse(e.ExtraParams["index"]);
    
            if ((index + 1) < this.WizardPanel.Items.Count)
            {
                this.WizardPanel.ActiveIndex = index + 1;
            }
            
            this.CheckButtons();
        }
    
        protected void Prev_Click(object sender, DirectEventArgs e)
        {
            int index = int.Parse(e.ExtraParams["index"]);
            
            if ((index - 1) >= 0)
            {
                this.WizardPanel.ActiveIndex = index - 1;
            }
            
            this.CheckButtons();
        }
    
        private void CheckButtons()
        {
            int index = this.WizardPanel.ActiveIndex;
            
            this.btnNext.Disabled = index == (this.WizardPanel.Items.Count - 1);
            this.btnPrev.Disabled = index == 0;
        }
    </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 id="Head1" runat="server">
        <title>CardLayout - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Viewport runat="server">
                <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
        <North MinHeight="150" MaxHeight="150">
            <ext:Panel ID="buttons" runat="server">
                  <Items>
                        <ext:Button ID="btnPrev" runat="server" Text="Prev" Disabled="true" Icon="PreviousGreen">
                        <DirectEvents>
                            <Click OnEvent="Prev_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)" Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btnNext" runat="server" Text="Next" Icon="NextGreen">
                        <DirectEvents>
                            <Click OnEvent="Next_Click">
                                <ExtraParams>
                                    <ext:Parameter Name="index" Value="#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)" Mode="Raw" />
                                </ExtraParams>
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                  </Items>
            </ext:Panel>
            </North>
            <Center>
            <ext:Panel
                ID="WizardPanel"
                runat="server"
                Title="Example Wizard"            
                Layout="card"
                ActiveIndex="0">      
                <Items>
                    <ext:Panel
                        ID="Panel1"
                        runat="server"
                        Border="false"
                        Header="false"
                        >
                        <Content>
                               <uc1:UserControl ID="uc1" runat="server" />
                        </Content>
                    </ext:Panel>
                    <ext:Panel
                        ID="Panel2"
                        runat="server"
                        Border="false"
                        Header="false"
                        >
                        <Content>
                               <uc1:UserControl ID="uc2" runat="server" />
                        </Content>
                    </ext:Panel>               
                </Items>    
            </ext:Panel>
            </Center>
            </ext:BorderLayout>
         </Items>
          /ext:Viewport>    
        </form>
    </body>
    </html>
    .ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="MySite.controls.UserControl" %>
    <asp:Panel ID="Panel" runat="server">
           <asp:Button ID="btn" runat="server" Text="Button"/>
    </asp:Panel>
    When I put all buttons from Panel named buttons to
    <Buttons>
    tag inside my WizardPanel it's not make any difference.

    Am I doing something wrong?

    Thanks,
    ViDom
    Last edited by Daniil; Sep 18, 2012 at 12:28 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I don't understand the issue well. The Next and Prev buttons change the active Panel.

    showing all Panels every time
    Please clarify what exactly Panels do you mean?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    I don't understand the issue well. The Next and Prev buttons change the active Panel.



    Please clarify what exactly Panels do you mean?
    Panel1 and Panel2 are shown every time one under another.Seems to active Panel doesn't work in this case.
  4. #4
    I am unable to reproduce it using the sample. For me, only one Panel is showed at the moment. They are switched by clicking on the buttons.

    Please post a screenshot how you see it running the sample.
  5. #5
    Quote Originally Posted by Daniil View Post
    I am unable to reproduce it using the sample. For me, only one Panel is showed at the moment. They are switched by clicking on the buttons.

    Please post a screenshot how you see it running the sample.

    I've show you my more complex UserControl

    Click image for larger version. 

Name:	error.jpg 
Views:	84 
Size:	91.7 KB 
ID:	4782

    But same it's display with sample I've provide you.

    Edit
    I've edited first post forgot about borderlayout ;/
    Attached Thumbnails Click image for larger version. 

Name:	error.jpg 
Views:	74 
Size:	81.9 KB 
ID:	4781  
  6. #6
    Quote Originally Posted by ViDom View Post
    Edit
    I've edited first post forgot about borderlayout ;/
    Any layout control can not be used on the page without a container. Now your sample causes a JavaScript error.

Similar Threads

  1. [CLOSED] Gridview not showing in Accordion Layout
    By trezv in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 31, 2012, 11:45 AM
  2. Replies: 1
    Last Post: May 31, 2012, 11:45 AM
  3. set activeindex in card layout
    By maxdiable in forum 1.x Help
    Replies: 2
    Last Post: Jun 28, 2010, 10:51 AM
  4. [CLOSED] Card Layout issue
    By ashton.lamont in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 01, 2010, 4:43 PM
  5. card layout height
    By [WP]joju in forum 1.x Help
    Replies: 1
    Last Post: Nov 04, 2009, 4:11 AM

Tags for this Thread

Posting Permissions