[CLOSED] Collapse/Hide Panel

  1. #1

    [CLOSED] Collapse/Hide Panel

    I have an issue when trying to collapse and hide the south panel when all fields are valid. I am emulating the check of all fields by just pressing the Valid button. I can setVisible(false) and the panel is hidden, but if the panel is expanded and I press the Valid button and then the InValid button the panel is shown again, but still expanded.

    When the Valid button is pressed I would like to have the panel collapsed and hidden, but I am having an issue doing this at the same time.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Collapse/Hide Panel</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Window runat="server" Icon="User" Title="Request" Height="420" Width="500" BodyPadding="5"
            Border="false" Layout="BorderLayout" Model="true">
            <HtmlBin>
                <script type="text/javascript">
                    function allFieldsValid(btn) {
                        //App.RequestErrors.collapse();
                        App.RequestErrors.setVisible(false);
                    }
                    function fieldsInValid(btn) {
                        App.RequestErrors.setVisible(true);
                    }
    
                </script>
            </HtmlBin>
            <Items>
                <ext:Panel runat="server" Region="East" BodyPadding="5" Width="250" Title="Terms of Use"
                    Collapsible="true" Collapsed="true" HideCollapseTool="true" BodyStyle="background-color: #FFFFE8;" />
                <ext:Panel ID="RequestErrors" runat="server" ClientIDMode="Static" Region="South" BodyPadding="5" Height="100" Title="Errors"
                    Collapsible="true" Collapsed="true" BodyStyle="background-color: #FFD9D9;" />
                <ext:FormPanel ID="RequestForm" runat="server" Frame="true" Region="Center" DefaultAnchor="100%"
                    AutoScroll="true">
                    <Items>
                    </Items>
                </ext:FormPanel>
            </Items>
            <Buttons>
                <ext:Button runat="server" Text="Valid" Icon="BulletTick" ToolTip="All fields Valid"
                    OnClientClick="allFieldsValid" />
                <ext:Button runat="server" Text="Invalid" Icon="BulletError" ToolTip="A field is invalid"
                    OnClientClick="fieldsInValid" />
            </Buttons>
        </ext:Window>
    </body>
    </html>
    I had a sort of related issue 16 months ago:

    Can't Hide a collapsed panel
    Last edited by Daniil; Mar 20, 2014 at 1:29 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    The collapsing process is animated by default.
    http://docs.sencha.com/extjs/4.2.1/#...ethod-collapse

    You can turn off animation:
    function allFieldsValid(btn) {
        App.RequestErrors.collapse(null, false);
        App.RequestErrors.setVisible(false);
    }
    or do the following
    function allFieldsValid(btn) {
        App.RequestErrors.collapse();
        App.RequestErrors.on("collapse", function() { this.hide(); }, null, { single: true });
    }
    There is a flicker effect with the second approach. It is because how the animation works. I don't think there is a good way to avoid that flicker effect. Hopefully you are good with turning off the animation.
  3. #3
    Wow, I totally missed the attributes and didn't consider that the collapse animation was hindering the hide. Thanks for the insight. Please close the thread.

Similar Threads

  1. collapse a panel through javascript
    By mibhpwosiay in forum 1.x Help
    Replies: 2
    Last Post: May 30, 2013, 12:49 AM
  2. Panel in Viewport can't Collapse,PLZ Help!
    By goga21cn in forum 2.x Help
    Replies: 5
    Last Post: Apr 08, 2013, 7:56 AM
  3. [CLOSED] Panel - Hide Header on Collapse
    By amitpareek in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Oct 17, 2012, 10:47 AM
  4. [CLOSED] Panel: How to hide the Collapse/Expand (+ and -) button?
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 21, 2011, 2:45 AM
  5. West panel does not collapse
    By sz_146 in forum 1.x Help
    Replies: 3
    Last Post: Jan 30, 2009, 12:13 PM

Posting Permissions