[OPEN] [#1509] [4.2.2] User Friendly Panel Expander

  1. #1

    [OPEN] [#1509] [4.2.2] User Friendly Panel Expander

    Support,

    Please note in this example, to expand the west panel, the user must click the double arrow at the top to expand. How can we make this more user friendly so that if they click ANYWHERE on the collapsed panel, it will expand.

    thanks,
    /Z

    <%@ Page Language="C#" %>
    
    
    <!DOCTYPE html>
    
    
    <html>
    <head runat="server">
        <title>Image on Collapsed BorderLayout Region - Ext.NET Examples</title>
    
    
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    
            <script type="text/javascript">
            var test = function () {
                App.WestPanel1.collapse();
            };
    
    
    
    
        </script>
    
    
    </head>
    <body>
      <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" >
            <Listeners>
                <DocumentReady Handler="test();" />
            </Listeners>
        </ext:ResourceManager>
    
    
        <h1>Image on Collapsed BorderLayout Region</h1>
    
    
        <ext:Window
            runat="server"
            Title="Collapsed Region Image"
            Icon="Application"
            Width="600"
            Height="350"
            Border="false"
            Closable="false"
            X="100"
            Y="100"
            Plain="true"
            Layout="BorderLayout">
            <Items>
                <ext:Panel ID="WestPanel1" 
                    runat="server" 
                    Title="Main Menu"
                    TitleCollapse="false"
                    Floatable="false"
                    Collapsed="false"
                    Region="West" 
                    Width="178"
                    Split="true"
                    Layout="FitLayout"
                    Collapsible="true">
    
    
    
    
                </ext:Panel>
                <ext:Panel runat="server" Region="Center" Title="Center region" />
                <ext:Panel
                    ID="SouthPanel"
                    runat="server"
                    Region="South"
                    Collapsible="true"
                    MinHeight="100"
                    Split="true"
                    Height="100"
                    Title="Footer"
                    TitleCollapse="false"
                    Floatable="false"
                    Collapsed="true">
                    <Listeners>
                        <AfterRender Handler="this.setTitle('');" />
                        <BeforeCollapse Handler="this.setTitle('');" />
                        <BeforeExpand Handler="this.setTitle(this.initialConfig.title);" />
                    </Listeners>
                 </ext:Panel>
            </Items>
        </ext:Window>
    </body>
    </html>
  2. #2
    Hello @Z!

    The setting I think you want would be TitleCollapse="true", and it just happened you set it as false in your line 54.

    TitleCollapse documentation.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    fantastic!

    Please file a bug that the mouse has the wrong icon. it should be a finger and it is an arrow.

    /Z
  4. #4
    Hello @Z!

    For the custom cursor over the whole window title (well, or at least its text) you could just do this:

    We've logged this visual glitch under #1509, and we'll be updating this as soon as it is fixed. This may be dependent of the active theme, as it is a visual/CSS effect.

    Meanwhile, this CSS might work for any theme, and will enable the visual effect only on the specific panel, selected by its ID defined in markup:

    <style type="text/css">
        div#WestPanel1-placeholder,
        #WestPanel1_header {
            cursor: pointer
        }
    </style>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jun 03, 2014, 1:06 PM
  2. [CLOSED] Scroll Bar in Row expander inside a form panel
    By MarginPoint in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 17, 2013, 11:59 AM
  3. [CLOSED] grid panel inside row expander
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: May 08, 2013, 11:47 AM
  4. custom row expander in grid panel
    By shunilkarki in forum 2.x Help
    Replies: 0
    Last Post: Apr 28, 2013, 6:32 AM
  5. Row Expander Plugin -User Control
    By sharif in forum 1.x Help
    Replies: 0
    Last Post: Nov 24, 2009, 3:43 PM

Posting Permissions