PDA

View Full Version : [CLOSED] Panel Header: Show only when collapsed



cwolcott
Feb 24, 2015, 9:08 PM
Quick question, can I show the header for a panel only when the panel is collapsed?

Took the following example Layout --> HBoxLayout --> Split (http://examples2.ext.net/#/Layout/HBoxLayout/Split/) and hide the header for Panel 1, but when it is collapsed I would like to see it shown. Is there an attribute?



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>VBoxLayout - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Window runat="server" Width="600" Height="150" Title="HBox window with splitters">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="2 0" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Flex="1" Title="Panel 1" CollapseDirection="Left" Header="false" />

<ext:BoxSplitter runat="server" Collapsible="true" CollapseTarget="Prev" />

<ext:Panel runat="server" Flex="1" Title="Panel 2" CollapseDirection="Left" />

<ext:BoxSplitter runat="server" Collapsible="true" CollapseTarget="Prev" />

<ext:Panel runat="server" Flex="1" Title="Panel 3" />

<ext:BoxSplitter runat="server" Collapsible="true" />

<ext:Panel runat="server" Flex="1" Title="Panel 4" CollapseDirection="Right" />

<ext:BoxSplitter runat="server" Collapsible="true" />

<ext:Panel ID="Panel5" runat="server" Flex="1" Title="Panel 5" CollapseDirection="Right" />
</Items>
</ext:Window>
</body>
</html>

fabricio.murta
Feb 25, 2015, 12:09 AM
Hello, Chris Wolcott!

I am afraid we don't have an specific setting for this but, setting header=false turns all header functionality off during screen build time.

If you define your default header view as hidden though, you'll get the desired result. As in that case, "collapsing" only makes a sense when the contents are limited to the header.



<ext:Panel runat="server" Flex="1" ID="pn1" Title="Panel 1" CollapseDirection="Left">
<HeaderConfig runat="server" Hidden="true" />
</ext:Panel>


If you want more options, you may bind event handlers to attain the same result with somewhat more control over what's happening:


<Listeners>
<Collapse Handler="this.header.setVisible(true);" />
<BeforeExpand Handler="this.header.setVisible(false)" />
</Listeners>

(remember to App.pn1.header.setVisible(false) on a script running after the panel is rendered!)

Hope this helps!

cwolcott
Feb 25, 2015, 2:02 AM
Perfect. I like:


HeaderConfig runat="server" Hidden="true" />

Please close the thread.