This is a multi-pane, application-oriented UI layout style that supports multiple * nested panels, automatic bars between regions and built-in * {@link Ext.panel.Panel#collapsible expanding and collapsing} of regions.
*This class is intended to be extended or created via the layout:'border'
* {@link Ext.container.Container#layout} config, and should generally not need to be created directly
* via the new keyword.
Example usage:
*
Ext.create('Ext.panel.Panel', {
width: 500,
height: 400,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Notes:
region:'center'.
* The child item in the center region will always be resized to fill the remaining space not used by
* the other regions in the layout.west or east may be configured with either
* an initial width, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.north or south may be configured with either
* an initial height, or a {@link Ext.layout.container.Box#flex} value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
wrc = {@link Ext#getCmp Ext.getCmp}('west-region-container');
wrc.{@link Ext.container.Container#removeAll removeAll}();
wrc.{@link Ext.container.Container#add add}({
title: 'Added Panel',
html: 'Some content'
});
* Return the {@link Ext.panel.Panel#placeholder placeholder} Component to which the passed child Panel of the layout will collapse. * By default, this will be a {@link Ext.panel.Header Header} component (Docked to the appropriate border). See {@link Ext.panel.Panel#placeholder placeholder}. * config to customize this.
*Note that this will be a fully instantiated Component, but will only be rendered when the Panel is first collapsed.
* @param {Panel} panel The child Panel of the layout for which to return the {@link Ext.panel.Panel#placeholder placeholder}. * @returns {Component} The Panel's {@link Ext.panel.Panel#placeholder placeholder} unless the {@link Ext.panel.Panel#collapseMode collapseMode} is *'header', in which case undefined is returned.
*/
getPlaceholder: function(comp) {
var me = this,
placeholder = comp.placeholder,
shadowContainer = comp.shadowOwnerCt,
shadowLayout = shadowContainer.layout,
oppositeDirection = Ext.panel.Panel.prototype.getOppositeDirection(comp.collapseDirection),
horiz = (comp.region == 'north' || comp.region == 'south');
// No placeholder if the collapse mode is not the Border layout default
if (comp.collapseMode == 'header') {
return;
}
// Provide a replacement Container with an expand tool
if (!placeholder) {
if (comp.collapseMode == 'mini') {
placeholder = Ext.create('Ext.resizer.Splitter', {
id: 'collapse-placeholder-' + comp.id,
collapseTarget: comp,
performCollapse: false,
listeners: {
click: {
fn: Ext.Function.bind(me.onSplitterCollapseClick, me, [comp]),
element: 'collapseEl'
}
}
});
placeholder.addCls(placeholder.collapsedCls);
} else {
placeholder = {
id: 'collapse-placeholder-' + comp.id,
margins: comp.initialConfig.margins || Ext.getClass(comp).prototype.margins,
xtype: 'header',
orientation: horiz ? 'horizontal' : 'vertical',
title: comp.title,
textCls: comp.headerTextCls,
iconCls: comp.iconCls,
baseCls: comp.baseCls + '-header',
ui: comp.ui,
indicateDrag: comp.draggable,
cls: Ext.baseCSSPrefix + 'region-collapsed-placeholder ' + Ext.baseCSSPrefix + 'region-collapsed-' + comp.collapseDirection + '-placeholder ' + comp.collapsedCls,
listeners: comp.floatable ? {
click: {
fn: function(e) {
me.floatCollapsedPanel(e, comp);
},
element: 'el'
}
} : null
};
// Hack for IE6/7/IEQuirks's inability to display an inline-block
if ((Ext.isIE6 || Ext.isIE7 || (Ext.isIEQuirks)) && !horiz) {
placeholder.width = 25;
}
if (!comp.hideCollapseTool) {
placeholder[horiz ? 'tools' : 'items'] = [{
xtype: 'tool',
client: comp,
type: 'expand-' + oppositeDirection,
handler: me.onPlaceHolderToolClick,
scope: me
}];
}
}
placeholder = me.owner.createComponent(placeholder);
if (comp.isXType('panel')) {
comp.on({
titlechange: me.onRegionTitleChange,
iconchange: me.onRegionIconChange,
scope: me
});
}
}
// The collapsed Component holds a reference to its placeholder and vice versa
comp.placeholder = placeholder;
placeholder.comp = comp;
return placeholder;
},
/**
* @private
* Update the placeholder title when panel title has been set or changed.
*/
onRegionTitleChange: function(comp, newTitle) {
comp.placeholder.setTitle(newTitle);
},
/**
* @private
* Update the placeholder iconCls when panel iconCls has been set or changed.
*/
onRegionIconChange: function(comp, newIconCls) {
comp.placeholder.setIconCls(newIconCls);
},
/**
* @private
* Calculates the size and positioning of the passed child item. Must be present because Panel's expand,
* when configured with a flex, calls this method on its ownerCt's layout.
* @param {Component} child The child Component to calculate the box for
* @return {Object} Object containing box measurements for the child. Properties are left,top,width,height.
*/
calculateChildBox: function(comp) {
var me = this;
if (me.shadowContainer.items.contains(comp)) {
return me.shadowContainer.layout.calculateChildBox(comp);
}
else if (me.embeddedContainer && me.embeddedContainer.items.contains(comp)) {
return me.embeddedContainer.layout.calculateChildBox(comp);
}
},
/**
* @private
* Intercepts the Panel's own collapse event and perform's substitution of the Panel
* with a placeholder Header orientated in the appropriate dimension.
* @param comp The Panel being collapsed.
* @param direction
* @param animate
* @returns {Boolean} false to inhibit the Panel from performing its own collapse.
*/
onBeforeRegionCollapse: function(comp, direction, animate) {
var me = this,
compEl = comp.el,
width,
miniCollapse = comp.collapseMode == 'mini',
shadowContainer = comp.shadowOwnerCt,
shadowLayout = shadowContainer.layout,
placeholder = comp.placeholder,
sl = me.owner.suspendLayout,
scsl = shadowContainer.suspendLayout,
isNorthOrWest = (comp.region == 'north' || comp.region == 'west'); // Flag to keep the placeholder non-adjacent to any Splitter
// Do not trigger a layout during transition to collapsed Component
me.owner.suspendLayout = true;
shadowContainer.suspendLayout = true;
// Prevent upward notifications from downstream layouts
shadowLayout.layoutBusy = true;
if (shadowContainer.componentLayout) {
shadowContainer.componentLayout.layoutBusy = true;
}
me.shadowContainer.layout.layoutBusy = true;
me.layoutBusy = true;
me.owner.componentLayout.layoutBusy = true;
// Provide a replacement Container with an expand tool
if (!placeholder) {
placeholder = me.getPlaceholder(comp);
}
// placeholder already in place; show it.
if (placeholder.shadowOwnerCt === shadowContainer) {
placeholder.show();
}
// Insert the collapsed placeholder Component into the appropriate Box layout shadow Container
// It must go next to its client Component, but non-adjacent to the splitter so splitter can find its collapse client.
// Inject an ownerCt value pointing to the owner, border layout Container as the user will expect.
else {
shadowContainer.insert(shadowContainer.items.indexOf(comp) + (isNorthOrWest ? 0 : 1), placeholder);
placeholder.shadowOwnerCt = shadowContainer;
placeholder.ownerCt = me.owner;
}
// Flag the collapsing Component as hidden and show the placeholder.
// This causes the shadow Box layout's calculateChildBoxes to calculate the correct new arrangement.
// We hide or slideOut the Component's element
comp.hidden = true;
if (!placeholder.rendered) {
shadowLayout.renderItem(placeholder, shadowLayout.innerCt);
// The inserted placeholder does not have the proper size, so copy the width
// for N/S or the height for E/W from the component. This fixes EXTJSIV-1562
// without recursive layouts. This is only an issue initially. After this time,
// placeholder will have the correct width/height set by the layout (which has
// already happened when we get here initially).
if (comp.region == 'north' || comp.region == 'south') {
placeholder.setCalculatedSize(comp.getWidth());
} else {
placeholder.setCalculatedSize(undefined, comp.getHeight());
}
}
// Jobs to be done after the collapse has been done
function afterCollapse() {
// Reinstate automatic laying out.
me.owner.suspendLayout = sl;
shadowContainer.suspendLayout = scsl;
delete shadowLayout.layoutBusy;
if (shadowContainer.componentLayout) {
delete shadowContainer.componentLayout.layoutBusy;
}
delete me.shadowContainer.layout.layoutBusy;
delete me.layoutBusy;
delete me.owner.componentLayout.layoutBusy;
// Fire the collapse event: The Panel has in fact been collapsed, but by substitution of an alternative Component
comp.collapsed = true;
comp.fireEvent('collapse', comp);
}
/*
* Set everything to the new positions. Note that we
* only want to animate the collapse if it wasn't configured
* initially with collapsed: true
*/
if (comp.animCollapse && me.initialCollapsedComplete) {
shadowLayout.layout();
compEl.dom.style.zIndex = 100;
// If we're mini-collapsing, the placholder is a Splitter. We don't want it to "bounce in"
if (!miniCollapse) {
placeholder.el.hide();
}
compEl.slideOut(me.slideDirection[comp.region], {
duration: Ext.Number.from(comp.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
compEl.show().setLeftTop(-10000, -10000);
compEl.dom.style.zIndex = '';
// If we're mini-collapsing, the placholder is a Splitter. We don't want it to "bounce in"
if (!miniCollapse) {
placeholder.el.slideIn(me.slideDirection[comp.region], {
easing: 'linear',
duration: 100
});
}
afterCollapse();
}
}
});
} else {
compEl.setLeftTop(-10000, -10000);
shadowLayout.layout();
afterCollapse();
}
return false;
},
// Hijack the expand operation to remove the placeholder and slide the region back in.
onBeforeRegionExpand: function(comp, animate) {
this.onPlaceHolderToolClick(null, null, null, {client: comp});
return false;
},
// Called when the collapsed placeholder is clicked to reinstate a "collapsed" (in reality hidden) Panel.
onPlaceHolderToolClick: function(e, target, owner, tool) {
var me = this,
comp = tool.client,
// Hide the placeholder unless it was the Component's preexisting splitter
hidePlaceholder = (comp.collapseMode != 'mini') || !comp.split,
compEl = comp.el,
toCompBox,
placeholder = comp.placeholder,
placeholderEl = placeholder.el,
shadowContainer = comp.shadowOwnerCt,
shadowLayout = shadowContainer.layout,
curSize,
sl = me.owner.suspendLayout,
scsl = shadowContainer.suspendLayout,
isFloating;
// If the slide in is still going, stop it.
// This will either leave the Component in its fully floated state (which is processed below)
// or in its collapsed state. Either way, we expand it..
if (comp.getActiveAnimation()) {
comp.stopAnimation();
}
// If the Component is fully floated when they click the placeholder Tool,
// it will be primed with a slide out animation object... so delete that
// and remove the mouseout listeners
if (comp.slideOutAnim) {
// Remove mouse leave monitors
compEl.un(comp.panelMouseMon);
placeholderEl.un(comp.placeholderMouseMon);
delete comp.slideOutAnim;
delete comp.panelMouseMon;
delete comp.placeholderMouseMon;
// If the Panel was floated and primed with a slideOut animation, we don't want to animate its layout operation.
isFloating = true;
}
// Do not trigger a layout during transition to expanded Component
me.owner.suspendLayout = true;
shadowContainer.suspendLayout = true;
// Prevent upward notifications from downstream layouts
shadowLayout.layoutBusy = true;
if (shadowContainer.componentLayout) {
shadowContainer.componentLayout.layoutBusy = true;
}
me.shadowContainer.layout.layoutBusy = true;
me.layoutBusy = true;
me.owner.componentLayout.layoutBusy = true;
// Unset the hidden and collapsed flags set in onBeforeRegionCollapse. The shadowLayout will now take it into account
// Find where the shadow Box layout plans to put the expanding Component.
comp.hidden = false;
comp.collapsed = false;
if (hidePlaceholder) {
placeholder.hidden = true;
}
toCompBox = shadowLayout.calculateChildBox(comp);
// Show the collapse tool in case it was hidden by the slide-in
if (comp.collapseTool) {
comp.collapseTool.show();
}
// If we're going to animate, we need to hide the component before moving it back into position
if (comp.animCollapse && !isFloating) {
compEl.setStyle('visibility', 'hidden');
}
compEl.setLeftTop(toCompBox.left, toCompBox.top);
// Equalize the size of the expanding Component prior to animation
// in case the layout area has changed size during the time it was collapsed.
curSize = comp.getSize();
if (curSize.height != toCompBox.height || curSize.width != toCompBox.width) {
me.setItemSize(comp, toCompBox.width, toCompBox.height);
}
// Jobs to be done after the expand has been done
function afterExpand() {
// Reinstate automatic laying out.
me.owner.suspendLayout = sl;
shadowContainer.suspendLayout = scsl;
delete shadowLayout.layoutBusy;
if (shadowContainer.componentLayout) {
delete shadowContainer.componentLayout.layoutBusy;
}
delete me.shadowContainer.layout.layoutBusy;
delete me.layoutBusy;
delete me.owner.componentLayout.layoutBusy;
// In case it was floated out and they clicked the re-expand tool
comp.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
// Fire the expand event: The Panel has in fact been expanded, but by removal of an alternative Component
comp.fireEvent('expand', comp);
}
// Hide the placeholder
if (hidePlaceholder) {
placeholder.el.hide();
}
// Slide the expanding Component to its new position.
// When that is done, layout the layout.
if (comp.animCollapse && !isFloating) {
compEl.dom.style.zIndex = 100;
compEl.slideIn(me.slideDirection[comp.region], {
duration: Ext.Number.from(comp.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
compEl.dom.style.zIndex = '';
comp.hidden = false;
shadowLayout.onLayout();
afterExpand();
}
}
});
} else {
shadowLayout.onLayout();
afterExpand();
}
},
floatCollapsedPanel: function(e, comp) {
if (comp.floatable === false) {
return;
}
var me = this,
compEl = comp.el,
placeholder = comp.placeholder,
placeholderEl = placeholder.el,
shadowContainer = comp.shadowOwnerCt,
shadowLayout = shadowContainer.layout,
placeholderBox = shadowLayout.getChildBox(placeholder),
scsl = shadowContainer.suspendLayout,
curSize, toCompBox, compAnim;
// Ignore clicks on tools.
if (e.getTarget('.' + Ext.baseCSSPrefix + 'tool')) {
return;
}
// It's *being* animated, ignore the click.
// Possible future enhancement: Stop and *reverse* the current active Fx.
if (compEl.getActiveAnimation()) {
return;
}
// If the Component is already fully floated when they click the placeholder,
// it will be primed with a slide out animation object... so slide it out.
if (comp.slideOutAnim) {
me.slideOutFloatedComponent(comp);
return;
}
// Function to be called when the mouse leaves the floated Panel
// Slide out when the mouse leaves the region bounded by the slid Component and its placeholder.
function onMouseLeaveFloated(e) {
var slideRegion = compEl.getRegion().union(placeholderEl.getRegion()).adjust(1, -1, -1, 1);
// If mouse is not within slide Region, slide it out
if (!slideRegion.contains(e.getPoint())) {
me.slideOutFloatedComponent(comp);
}
}
// Monitor for mouseouting of the placeholder. Hide it if they exit for half a second or more
comp.placeholderMouseMon = placeholderEl.monitorMouseLeave(500, onMouseLeaveFloated);
// Do not trigger a layout during slide out of the Component
shadowContainer.suspendLayout = true;
// Prevent upward notifications from downstream layouts
me.layoutBusy = true;
me.owner.componentLayout.layoutBusy = true;
// The collapse tool is hidden while slid.
// It is re-shown on expand.
if (comp.collapseTool) {
comp.collapseTool.hide();
}
// Set flags so that the layout will calculate the boxes for what we want
comp.hidden = false;
comp.collapsed = false;
placeholder.hidden = true;
// Recalculate new arrangement of the Component being floated.
toCompBox = shadowLayout.calculateChildBox(comp);
placeholder.hidden = false;
// Component to appear just after the placeholder, whatever "after" means in the context of the shadow Box layout.
if (comp.region == 'north' || comp.region == 'west') {
toCompBox[shadowLayout.parallelBefore] += placeholderBox[shadowLayout.parallelPrefix] - 1;
} else {
toCompBox[shadowLayout.parallelBefore] -= (placeholderBox[shadowLayout.parallelPrefix] - 1);
}
compEl.setStyle('visibility', 'hidden');
compEl.setLeftTop(toCompBox.left, toCompBox.top);
// Equalize the size of the expanding Component prior to animation
// in case the layout area has changed size during the time it was collapsed.
curSize = comp.getSize();
if (curSize.height != toCompBox.height || curSize.width != toCompBox.width) {
me.setItemSize(comp, toCompBox.width, toCompBox.height);
}
// This animation slides the collapsed Component's el out to just beyond its placeholder
compAnim = {
listeners: {
afteranimate: function() {
shadowContainer.suspendLayout = scsl;
delete me.layoutBusy;
delete me.owner.componentLayout.layoutBusy;
// Prime the Component with an Anim config object to slide it back out
compAnim.listeners = {
afterAnimate: function() {
compEl.show().removeCls(Ext.baseCSSPrefix + 'border-region-slide-in').setLeftTop(-10000, -10000);
// Reinstate the correct, current state after slide out animation finishes
comp.hidden = true;
comp.collapsed = true;
delete comp.slideOutAnim;
delete comp.panelMouseMon;
delete comp.placeholderMouseMon;
}
};
comp.slideOutAnim = compAnim;
}
},
duration: 500
};
// Give the element the correct class which places it at a high z-index
compEl.addCls(Ext.baseCSSPrefix + 'border-region-slide-in');
// Begin the slide in
compEl.slideIn(me.slideDirection[comp.region], compAnim);
// Monitor for mouseouting of the slid area. Hide it if they exit for half a second or more
comp.panelMouseMon = compEl.monitorMouseLeave(500, onMouseLeaveFloated);
},
slideOutFloatedComponent: function(comp) {
var compEl = comp.el,
slideOutAnim;
// Remove mouse leave monitors
compEl.un(comp.panelMouseMon);
comp.placeholder.el.un(comp.placeholderMouseMon);
// Slide the Component out
compEl.slideOut(this.slideDirection[comp.region], comp.slideOutAnim);
delete comp.slideOutAnim;
delete comp.panelMouseMon;
delete comp.placeholderMouseMon;
},
/*
* @private
* Ensure any collapsed placeholder Component is destroyed along with its region.
* Can't do this in onDestroy because they may remove a Component and use it elsewhere.
*/
onRegionDestroy: function(comp) {
var placeholder = comp.placeholder;
if (placeholder) {
delete placeholder.ownerCt;
placeholder.destroy();
}
},
/*
* @private
* Ensure any shadow Containers are destroyed.
* Ensure we don't keep references to Components.
*/
onDestroy: function() {
var me = this,
shadowContainer = me.shadowContainer,
embeddedContainer = me.embeddedContainer;
if (shadowContainer) {
delete shadowContainer.ownerCt;
Ext.destroy(shadowContainer);
}
if (embeddedContainer) {
delete embeddedContainer.ownerCt;
Ext.destroy(embeddedContainer);
}
delete me.regions;
delete me.splitters;
delete me.shadowContainer;
delete me.embeddedContainer;
me.callParent(arguments);
}
});