What's New?

[CLOSED] Icon on Collapsed Panel

  1. #1
    Oct 23, 2013, 5:11 PM

    [CLOSED] Icon on Collapsed Panel

    I have a panel that collapses and has a title and icon. The alignment of the icon, title, and collapse handlebar when the panel is expanded is great:

    {ICON}{TITLE}{COLLAPSE}

    But when the panel is collapsed, the EXPAND tool is on the bottom and the ICON is on the top:

    {ICON}
    {TITLE}
    {EXPAND}

    Is there an option for me to switch these?

    {EXPAND}
    {TITLE}
    {ICON}

    Thanks!
    Last edited by geoffrey.mcgill; Oct 25, 2013 at 2:07 PM. Reason: [CLOSED]
  2. #2
    Oct 23, 2013, 5:15 PM
    Quote Originally Posted by ptrourke View Post
    I have a panel that collapses and has a title and icon. The alignment of the icon, title, and collapse handlebar when the panel is expanded is great:

    {ICON}{TITLE}{COLLAPSE}

    But when the panel is collapsed, the EXPAND tool is on the bottom and the ICON is on the top:

    {ICON}
    {TITLE}
    {EXPAND}

    Is there an option for me to switch these?

    {EXPAND}
    {TITLE}
    {ICON}

    Thanks!
    When I expand/collapse a Panel, all the elements (icon, title, expander) stay in the same location.

    Example

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel 
            runat="server" 
            Title="Testing"
            Icon="Accept"
            Collapsible="true"
            Height="215"
            Width="350"
            />
    </form>
</body>
</html>
    Geoffrey McGill
    Founder
    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
    Oct 23, 2013, 6:51 PM
    Quote Originally Posted by geoffrey.mcgill View Post
    When I expand/collapse a Panel, all the elements (icon, title, expander) stay in the same location.
    Thanks for responding, Geoffrey. Obviously I didn't make my question clear, sorry.

    The panel is an East panel, and collapses right. When it is collapsed right, the title becomes vertical text, with the icon on the top of the title bar and the expand tool on the bottom. This is I'm sure expected, default behavior and not a bug. 

    
<ext:Viewport>
  <ext:Panel ID="Tools" runat="server" Region="West">
  <%-- SNIP --%>
  </ext:Panel>
  <ext:TabPanel ID="DataGrids" runat="server" Region="Center" Border="true" Layout="BorderLayout">
    <%-- SNIP --%>
  </ext:Panel>
  <ext:TabPanel ID="Details" runat="server" Region="East" Width="450" Split="true" AutoDestroy="false" 
    Collapsible="true" Title="ABC" Icon="Anchor" Collapsed="true" CollapseDirection="Right" TitleAlign="Right">
  </ext:TabPanel>
  <%-- SNIP --%>
  </ext:Panel>
<ext:Viewport>
    However, I think it would be better (for my purposes, anyway) to have the expand tool at the top, followed by the icon, and then by the title (as vertical text). Is it possible to change the position of the expand tool in this way?
  4. #4
    Oct 23, 2013, 9:09 PM
    Hello!

    It's not possible by default, but you can override it. Try the following:

    Ext.override(Ext.panel.Panel, {
    createReExpander: function (direction, defaults) {
        var me = this,
            isLeft = direction === 'left',
            isRight = direction === 'right',
            isVertical = isLeft || isRight,
            result = Ext.apply({
                hideMode: 'offsets',
                title: me.title || '&#160;',
                titleAlign: me.titleAlign,
                orientation: isVertical ? 'vertical' : 'horizontal',
                textCls: me.headerTextCls,
                icon: me.icon,
                iconCls: me.iconCls,
                glyph: me.glyph,
                baseCls: me.self.prototype.baseCls + '-header',
                ui: me.ui,
                frame: me.frame && me.frameHeader,
                ignoreParentFrame: me.frame || me.overlapHeader,
                indicateDrag: me.draggable,
                collapseImmune: true,
                ownerCt: me.ownerCt,
                ownerLayout: me.componentLayout,
                margin: me.margin
            }, defaults);

        // If we're in mini mode, set the placeholder size to only 1px since
        // we don't need it to show up.
        if (me.collapseMode === 'mini') {
            if (isVertical) {
                result.width = 1;
            } else {
                result.height = 1;
            }
        }

        // Create the re expand tool
        // For UI consistency reasons, collapse:left reExpanders, and region: 'west' placeHolders
        // have the re expand tool at the *top* with a bit of space.
        if (!me.hideCollapseTool) {
            if (isLeft || (isRight && me.isPlaceHolderCollapse())) {
                // adjust the title position if the collapse tool needs to be at the
                // top of a vertical header
                result.titlePosition = 1;
            }

            result.titlePosition = 1;
            result.tools = [{
                xtype: 'tool',
                type: 'expand-' + me.getOppositeDirection(direction),
                uiCls: ['top'],
                handler: me.toggleCollapse,
                scope: me
            }];
        }
        result = new Ext.panel.Header(result);
        result.addClsWithUI(me.getHeaderCollapsedClasses(result));
                    
        var icon = result.items.items[0],
                expandTool = result.items.items[2],
                title = result.items.items[1];
                    
        result.items.items[0] = expandTool;
        result.items.items[2] = icon;
        return result;
    }
});
  5. #5
    Oct 25, 2013, 2:06 PM
    Baidaly,

    Excellent, thanks! I changed it slightly because I had other panels with fewer than three objects in the header and was getting an error. Please close. 

    Ext.override(Ext.panel.Panel, {
    createReExpander: function (direction, defaults) {
        var me, isLeft, isRight, isVertical, result, icon, expandTool, title;
        me = this;
        isLeft = direction === 'left';
        isRight = direction === 'right';
        isVertical = isLeft || isRight;
        result = Ext.apply({
                hideMode: 'offsets',
                title: me.title || '*',
                titleAlign: me.titleAlign,
                orientation: isVertical ? 'vertical' : 'horizontal',
                textCls: me.headerTextCls,
                icon: me.icon,
                iconCls: me.iconCls,
                glyph: me.glyph,
                baseCls: me.self.prototype.baseCls + '-header',
                ui: me.ui,
                frame: me.frame && me.frameHeader,
                ignoreParentFrame: me.frame || me.overlapHeader,
                indicateDrag: me.draggable,
                collapseImmune: true,
                ownerCt: me.ownerCt,
                ownerLayout: me.componentLayout,
                margin: me.margin
            }, defaults);

        // If we're in mini mode, set the placeholder size to only 1px since
        // we don't need it to show up.
        if (me.collapseMode === 'mini') {
            if (isVertical) {
                result.width = 1;
            } else {
                result.height = 1;
            }
        }

        // Create the re expand tool
        // For UI consistency reasons, collapse:left reExpanders, and region: 'west' placeHolders
        // have the re expand tool at the *top* with a bit of space.
        if (!me.hideCollapseTool) {
            if (isLeft || (isRight && me.isPlaceHolderCollapse())) {
                // adjust the title position if the collapse tool needs to be at the
                // top of a vertical header
                result.titlePosition = 1;
            }

            result.titlePosition = 1;
            result.tools = [{
                xtype: 'tool',
                type: 'expand-' + me.getOppositeDirection(direction),
                uiCls: ['top'],
                handler: me.toggleCollapse,
                scope: me
            }];
        }
        result = new Ext.panel.Header(result);
        result.addClsWithUI(me.getHeaderCollapsedClasses(result));
        
        if (result.items.length > 2) {            
            icon = result.items.items[0];
            expandTool = result.items.items[2];
            title = result.items.items[1];
            result.items.items[0] = expandTool;
            result.items.items[2] = icon;
        }
        return result;
    }
});
    [/QUOTE]
  6. #6
    Oct 25, 2013, 9:24 PM
    Thank you for sharing!

Similar Threads

  1. [CLOSED] [#7] Can't Hide a collapsed panel
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Mar 08, 2013, 2:10 AM
  2. [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
  3. Viewport: panel expand on collapsed bar click, same as expand icon click...
    By deljo in forum 1.x Help
    Replies: 1
    Last Post: Mar 13, 2012, 8:37 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

Tags for this Thread

Posting Permissions