What's New?

[CLOSED] Panel Header: Show only when collapsed

  1. #1
    Feb 24, 2015, 9:08 PM

    [CLOSED] Panel Header: Show only when collapsed

    Quick question, can I show the header for a panel only when the panel is collapsed?

    Took the following example 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>
    Last edited by fabricio.murta; Feb 25, 2015 at 3:04 AM. Reason: [CLOSED]
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Feb 25, 2015, 2:02 AM
    Perfect. I like:

    HeaderConfig runat="server" Hidden="true" />
    Please close the thread.

Similar Threads

  1. [CLOSED] Show icon on Panel header
    By speedstepmem4 in forum 3.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 17, 2015, 3:15 AM
  2. Collapsed panel header onmouseover no work
    By necpoctt in forum 2.x Help
    Replies: 1
    Last Post: Dec 25, 2013, 7:59 AM
  3. [CLOSED] Title on a collapsed Panel
    By sisa in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 06, 2012, 6:42 AM
  4. How to set ext:panel 's Collapsed proprty to false upon loading of ext:Panel?
    By Rizwan-Ali in forum 1.x Help
    Replies: 0
    Last Post: May 27, 2009, 6:50 AM
  5. Panel - Collapsed Title?
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Jan 21, 2009, 9:35 AM

Posting Permissions