PDA

View Full Version : [CLOSED] Collapse/Hide Panel



cwolcott
Mar 20, 2014, 1: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>
<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 (http://forums.ext.net/showthread.php?22014-CLOSED-7-Can-t-Hide-a-collapsed-panel)

Daniil
Mar 20, 2014, 7:21 AM
Hi Chris,

The collapsing process is animated by default.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-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.

cwolcott
Mar 20, 2014, 2: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.