Hide the edge of a panel header

  1. #1

    Hide the edge of a panel header

    Good afternoon,
    * How I can hide the edge of a panel header, when running in an event that triggers the collapse? ie I do not want to be perceived as the panel is collapsed on the edge of a window as shown in the image.
    Another point is that in the configuration panel holds: CollapseMode = "Mini", this setting if you hide the edge but loses the collapse animation effect which does not want to go through usability issues.
    Thank you.

    Ext.net 2.0

    Click image for larger version. 

Name:	Imagen A.jpg 
Views:	160 
Size:	42.3 KB 
ID:	5204Click image for larger version. 

Name:	Imagen B.jpg 
Views:	167 
Size:	49.3 KB 
ID:	5205

    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Image on Collapsed BorderLayout Region - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
          
        </style>
        <script type="text/javascript">
    
            var toggle = function () {
                App.Panel1.collapsed == false ? App.Panel1.collapse() : App.Panel1.toggleCollapse();
            }
    
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window ID="Window1" runat="server" Title="Collapsed Region Image" Icon="Application"
            Width="595" Height="350" Border="false" Plain="true" Region="Center" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel1" runat="server" Width="590" Height="350"   Collapsible="false"
                    Region="East"  HideCollapseTool="true" Border="false" TitleCollapse="true"  >
                    <TopBar>
                        <ext:Toolbar ID="Toolbar2" runat="server">
                            <Items>
                                <ext:Button ID="Button6" runat="server" Text="Toggle2">
                                    <Listeners>
                                        <Click Fn="toggle" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                        <br />
                        Some content<br />
                        <br />
                        <br />
                        <br />
                        <br />
                        I'm the bottom
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Window>
    </body>
    </html>
  2. #2
  3. #3
    Quote Originally Posted by Baidaly View Post
    I do not understand, as the thread is the solution set header = false and update the program in Version 2.1, and I have updated and set it but it does not work, what other setting I'm missing? I would also like to know if it can take effect when two panels, as you can see in the code.

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
          
        </style>
        <script type="text/javascript">
            var toggle = function () {
     
                App.Panel2.collapsed == false ? App.Panel2.collapse() : App.Panel2.expand();
            };
    
        </script>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window ID="Window1" runat="server" Title="Collapsed Region Image" Icon="Application"
            Width="600" Height="350" Border="false" Plain="true" Region="Center" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="Panel2" runat="server" Width="590" Height="350" Collapsed="true" 
                    Region="East"  Collapsible="false"   
                    HideCollapseTool="true"  Header="false" CollapseDirection="Right" CollapsedCls="hide-offsets" >
                    <TopBar>
                        <ext:Toolbar ID="Toolbar2" runat="server">
                            <Items>
                                <ext:Button ID="Button6" runat="server" Text="Toggle2">
                                    <Listeners>
                                        <Click Fn="toggle" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                        <br />
                        East<br />
                    </Content>
                </ext:Panel>
                <ext:Panel ID="Panel1" runat="server"  CollapseEl="body" Region="Center" Collapsible="false" CollapseDirection="Top"   
                    HideCollapseTool="true" Header="false" AnimCollapse="true" CollapsedCls="hide-offsets"  >
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button3" runat="server" Text="Toggle1">
                                    <Listeners>
                                        <Click Fn="toggle" />
                                    </Listeners>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Content>
                        <br />
                        Center<br />
                    </Content>
                </ext:Panel>
            </Items>
        </ext:Window>
    </body>
    </html>
  4. #4
    Unfortunately, I think there is only one built-in option is to use CollapseMode="Mini". Actually, right now Sencha knows about bug with animation but there is no time when they will fix it.
    http://www.sencha.com/forum/showthre...lapseMode-mini

    I will try to find some solution for you but I cannot promise it.
  5. #5
    Hi,

    Using the Placeholder CollapseMode and a hidden placeholder can be a solution.

    Example
    <ext:Panel
        ID="Panel1"
        runat="server" 
        Width="300" 
        Region="East"
        CollapseMode="Placeholder">
        <CustomConfig>
            <ext:ConfigItem Name="placeholder" Value="{ hidden: true }" Mode="Raw" />
        </CustomConfig>
    </ext:Panel>
  6. #6
    Quote Originally Posted by Daniil View Post
    Hi,

    Using the Placeholder CollapseMode and a hidden placeholder can be a solution.

    Example
    <ext:Panel
        ID="Panel1"
        runat="server" 
        Width="300" 
        Region="East"
        CollapseMode="Placeholder">
        <CustomConfig>
            <ext:ConfigItem Name="placeholder" Value="{ hidden: true }" Mode="Raw" />
        </CustomConfig>
    </ext:Panel>
    Thanks Daniil and Baidaly gentlemen for your help, excellent support team that is viable solution for what I need, thanks again for helping me in this whim of mine.
  7. #7
    You are welcome.

    We are looking forward to see you among the premium members;)
  8. #8
    Thank you very much, if things go well for me next year I'll be there.

Similar Threads

  1. [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
  2. [CLOSED] how to hide panel header
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jan 05, 2011, 8:35 AM
  3. Hide GridPanel Header
    By ShivaKumar in forum 1.x Help
    Replies: 2
    Last Post: May 04, 2010, 11:25 AM
  4. gridpanel: hide column header
    By pintun in forum 1.x Help
    Replies: 2
    Last Post: Sep 23, 2009, 11:53 AM
  5. [CLOSED] GridPanel Hide Header?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 16, 2008, 6:43 PM

Posting Permissions