View Full Version : [CLOSED] Collapse/Hide Panel

Mar 20, 2014, 12:57 AM
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>
<head runat="server">
<title>Collapse/Hide Panel</title>
<ext:ResourceManager runat="server" />
<ext:Window runat="server" Icon="User" Title="Request" Height="420" Width="500" BodyPadding="5"
Border="false" Layout="BorderLayout" Model="true">
<script type="text/javascript">
function allFieldsValid(btn) {
function fieldsInValid(btn) {

<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%"
<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" />

I had a sort of related issue 16 months ago:

Can't Hide a collapsed panel (http://forums.ext.net/showthread.php?22014-CLOSED-7-Can-t-Hide-a-collapsed-panel)

Mar 20, 2014, 6:21 AM
Hi Chris,

The collapsing process is animated by default.

You can turn off animation:

function allFieldsValid(btn) {
App.RequestErrors.collapse(null, false);
or do the following

function allFieldsValid(btn) {
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.

Mar 20, 2014, 1:10 PM
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.