PDA

View Full Version : [CLOSED] Icon on Collapsed Panel



ptrourke
Oct 23, 2013, 5:11 PM
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!

geoffrey.mcgill
Oct 23, 2013, 5:15 PM
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>

ptrourke
Oct 23, 2013, 6:51 PM
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?

Baidaly
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 || '*',
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(r esult));

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;
}
});

ptrourke
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(r esult));

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]

Baidaly
Oct 25, 2013, 9:24 PM
Thank you for sharing!