What's New?

[CLOSED] Show no expandable panel in accordion layout panel

  1. #1
    Nov 13, 2012, 8:03 AM

    [CLOSED] Show no expandable panel in accordion layout panel

    Hi guys,

    I have a panel with AccordionLayout, same : https://examples2.ext.net/#/Layout/A...iginal_Header/.

    Initially, i have 1 panel show in accordion and 3 hidden. I show/hide the last 3 panels with GridRowSelection (associated to javascript function)

    Actually, when i show a hidden panel and hide show panel, my first panel isn't display. I want the first panel doesn't move and keep display.

    Sample : 

    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Original Header - Ext.NET Examples</title>
    <script language="javascript" type="text/javascript">
        var testButton1 = function ()
        {
            Ext.getCmp('Panel4').show();
            Ext.getCmp('Panel5').hide();
        }
        var testButton2 = function ()
        {
            Ext.getCmp('Panel5').show();
            Ext.getCmp('Panel4').hide();
        }
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="Border">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Width="300" Border="false" Region="West" Layout="Fit"
                BodyPadding="5">
                <Items>
                    <ext:Panel ID="Panel2" runat="server" Layout="Accordion" Margins="0 0 15 0">
                        <LayoutConfig>
                            <ext:AccordionLayoutConfig OriginalHeader="true" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel ID="Panel3" runat="server" Title="Item 1" Border="false">
                                <Items>
                                    <ext:Button Text="ButShowPanel4" runat="server">
                                        <Listeners>
                                            <Click Handler="testButton1();" />
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button Text="ButShowPanel5" runat="server">
                                        <Listeners>
                                            <Click Handler="testButton2();" />
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Panel>
                            <ext:Panel ID="Panel4" runat="server" Title="Item 2" Border="false">
                                <Listeners>
                                    <Render Handler="#{Panel4}.hide();" />
                                </Listeners>
                            </ext:Panel>
                            <ext:Panel ID="Panel5" runat="server" Title="Item 3" Border="false">
                                <Listeners>
                                    <Render Handler="#{Panel5}.hide();" />
                                </Listeners>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Regards

    Yoann
    Last edited by Daniil; Nov 13, 2012 at 4:11 PM. Reason: [CLOSED]
  2. #2
    Nov 13, 2012, 10:18 AM
    Hi Yoann,

    What about to move this Panel out from AccordionLayout?
  3. #3
    Nov 13, 2012, 11:27 AM
    If a click on "ButShowPanel4" and "ButShowPanel5" i have (Before.png) :

    Click image for larger version.  Name: before.png  Views: 150  Size: 5.3 KB  ID: 5081

    and i want (after.png) :

    Click image for larger version.  Name: after.png  Views: 122  Size: 7.9 KB  ID: 5082
  4. #4
    Nov 13, 2012, 1:36 PM
    Please try this.

    Example
    somePanel1.hide();
somePanel2.show(null, function () {
    mainPanel.expand();
});
  5. #5
    Nov 13, 2012, 2:22 PM
    I try

    var testButton1 = function ()
        {
            Ext.getCmp('Panel4').show(null, function ()
            {
                Ext.getCmp('Panel2').expand();
            });
            Ext.getCmp('Panel5').hide();
        }
        var testButton2 = function ()
        {
            Ext.getCmp('Panel4').hide();
            Ext.getCmp('Panel5').show(null, function ()
            {
                Ext.getCmp('Panel2').expand();
            });
            
        }
    but problem is the same
  6. #6
    Nov 13, 2012, 3:07 PM
    Please also set Animate="false" for the AccordionLayoutConfig.

    If you do need animation, then please set up the following CustomConfig.

    <ext:AccordionLayoutConfig OriginalHeader="true">
    <CustomConfig>
        <ext:ConfigItem Name="onComponentShow" Value="Ext.emptyFn" Mode="Raw" />
    </CustomConfig>
</ext:AccordionLayoutConfig>
    It will work with your initial JavaScript. But I would interchange the hide and show calls.

    The original onComponentShow function is:
    onComponentShow: function (comp) {
    // Showing a Component means that you want to see it, so expand it.
    this.onComponentExpand(comp);
}
  7. #7
    Nov 13, 2012, 4:07 PM
    Perfect, thanks a lot daniil !!!

Similar Threads

  1. [CLOSED] Layout: How to align a panel (absolute height and width) in the center of another panel?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 09, 2012, 4:32 PM
  2. [CLOSED] How I set the Panel to show vertical scrollbar when the aspx page contained extrapolating the size the panel region?
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2012, 9:00 PM
  3. [CLOSED] IE9, Panel with Column Layout and Hide/Show methods problem
    By Pablo in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 05, 2011, 7:05 PM
  4. Panel in MasterPage, Dynamic generate Accordion in Panel and Save state for this Colapse and expand in Session?
    By netcooliteuser in forum 1.x Help
    Replies: 2
    Last Post: Dec 28, 2010, 9:47 PM
  5. Expand all panel items in accordion layout
    By DavidS in forum 1.x Help
    Replies: 4
    Last Post: Nov 25, 2010, 6:24 AM

Tags for this Thread

Posting Permissions