/**
* Panel is a container that has specific functionality and structural components that make it the perfect building
* block for application-oriented user interfaces.
*
* Panels are, by virtue of their inheritance from {@link Ext.container.Container}, capable of being configured with a
* {@link Ext.container.Container#layout layout}, and containing child Components.
*
* When either specifying child {@link #cfg-items} of a Panel, or dynamically {@link Ext.container.Container#method-add adding}
* Components to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those
* child elements need to be sized using one of Ext's built-in `{@link Ext.container.Container#layout layout}`
* schemes. By default, Panels use the {@link Ext.layout.container.Auto Auto} scheme. This simply renders child
* components, appending them one after the other inside the Container, and **does not apply any sizing** at all.
*
* {@img Ext.panel.Panel/panel.png Panel components}
*
* A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate {@link
* Ext.panel.Header header}, {@link #fbar footer} and body sections.
*
* Panel also provides built-in {@link #collapsible collapsible, expandable} and {@link #closable} behavior. Panels can
* be easily dropped into any {@link Ext.container.Container Container} or layout, and the layout and rendering pipeline
* is {@link Ext.container.Container#method-add completely managed by the framework}.
*
* **Note:** By default, the `{@link #closable close}` header tool _destroys_ the Panel resulting in removal of the
* Panel and the destruction of any descendant Components. This makes the Panel object, and all its descendants
* **unusable**. To enable the close tool to simply _hide_ a Panel for later re-use, configure the Panel with
* `{@link #closeAction closeAction}: 'hide'`.
*
* Usually, Panels are used as constituents within an application, in which case, they would be used as child items of
* Containers, and would themselves use Ext.Components as child {@link #cfg-items}. However to illustrate simply rendering a
* Panel into the document, here's how to do it:
*
* @example
* Ext.create('Ext.panel.Panel', {
* title: 'Hello',
* width: 200,
* html: '<p>World!</p>',
* renderTo: Ext.getBody()
* });
*
* A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a
* constituent part of a Container:
*
* @example
* var filterPanel = Ext.create('Ext.panel.Panel', {
* bodyPadding: 5, // Don't want content to crunch against the borders
* width: 300,
* title: 'Filters',
* items: [{
* xtype: 'datefield',
* fieldLabel: 'Start date'
* }, {
* xtype: 'datefield',
* fieldLabel: 'End date'
* }],
* renderTo: Ext.getBody()
* });
*
* Note that the Panel above is configured to render into the document and assigned a size. In a real world scenario,
* the Panel will often be added inside a Container which will use a {@link #layout} to render, size and position its
* child Components.
*
* Panels will often use specific {@link #layout}s to provide an application with shape and structure by containing and
* arranging child Components:
*
* @example
* var resultsPanel = Ext.create('Ext.panel.Panel', {
* title: 'Results',
* width: 600,
* height: 400,
* renderTo: Ext.getBody(),
* layout: {
* type: 'vbox', // Arrange child items vertically
* align: 'stretch', // Each takes up full width
* padding: 5
* },
* items: [{ // Results grid specified as a config object with an xtype of 'grid'
* xtype: 'grid',
* columns: [{header: 'Column One'}], // One header just for show. There's no data,
* store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
* flex: 1 // Use 1/3 of Container's height (hint to Box layout)
* }, {
* xtype: 'splitter' // A splitter between the two child items
* }, { // Details Panel specified as a config object (no xtype defaults to 'panel').
* title: 'Details',
* bodyPadding: 5,
* items: [{
* fieldLabel: 'Data item',
* xtype: 'textfield'
* }], // An array of form fields
* flex: 2 // Use 2/3 of Container's height (hint to Box layout)
* }]
* });
*
* The example illustrates one possible method of displaying search results. The Panel contains a grid with the
* resulting data arranged in rows. Each selected row may be displayed in detail in the Panel below. The {@link
* Ext.layout.container.VBox vbox} layout is used to arrange the two vertically. It is configured to stretch child items
* horizontally to full width. Child items may either be configured with a numeric height, or with a `flex` value to
* distribute available space proportionately.
*
* This Panel itself may be a child item of, for exaple, a {@link Ext.tab.Panel} which will size its child items to fit
* within its content area.
*
* Using these techniques, as long as the **layout** is chosen and configured correctly, an application may have any
* level of nested containment, all dynamically sized according to configuration, the user's preference and available
* browser size.
*/
Ext.define('Ext.panel.Panel', {
extend: 'Ext.panel.AbstractPanel',
requires: [
'Ext.panel.Header',
'Ext.fx.Anim',
'Ext.util.KeyMap',
'Ext.panel.DD',
'Ext.XTemplate',
'Ext.layout.component.Dock',
'Ext.util.Memento'
],
alias: 'widget.panel',
alternateClassName: 'Ext.Panel',
/**
* @cfg {String} collapsedCls
* A CSS class to add to the panel's element after it has been collapsed.
*/
collapsedCls: 'collapsed',
/**
* @cfg {Boolean} animCollapse
* `true` to animate the transition when the panel is collapsed, `false` to skip the animation (defaults to `true`
* if the {@link Ext.fx.Anim} class is available, otherwise `false`). May also be specified as the animation
* duration in milliseconds.
*/
animCollapse: Ext.enableFx,
/**
* @cfg {Number} minButtonWidth
* Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default
* value for the {@link Ext.button.Button#minWidth} config of each Button added to the **footer toolbar** via the
* {@link #fbar} or {@link #buttons} configurations. It will be ignored for buttons that have a minWidth configured
* some other way, e.g. in their own config object or via the {@link Ext.container.Container#defaults defaults} of
* their parent container.
*/
minButtonWidth: 75,
/**
* @cfg {Boolean} collapsed
* `true` to render the panel collapsed, `false` to render it expanded.
*/
collapsed: false,
/**
* @cfg {Boolean} collapseFirst
* `true` to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in
* the panel's title bar, `false` to render it last.
*/
collapseFirst: true,
/**
* @cfg {Boolean} hideCollapseTool
* `true` to hide the expand/collapse toggle button when `{@link #collapsible} == true`, `false` to display it.
*/
hideCollapseTool: false,
/**
* @cfg {Boolean} titleCollapse
* `true` to allow expanding and collapsing the panel (when `{@link #collapsible} = true`) by clicking anywhere in
* the header bar, `false`) to allow it only by clicking to tool button).
*/
titleCollapse: false,
/**
* @cfg {String} collapseMode
* **Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a
* {@link Ext.layout.container.Border border layout}.**
*
* When _not_ a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel's header
* remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header
* (orientated correctly depending on the {@link #collapseDirection}) will be inserted to show a the title and a re-
* expand tool.
*
* When a child item of a {@link Ext.layout.container.Border border layout}, this config has two options:
*
* - **`undefined/omitted`**
*
* When collapsed, a placeholder {@link Ext.panel.Header Header} is injected into the layout to represent the Panel
* and to provide a UI with a Tool to allow the user to re-expand the Panel.
*
* - **`header`** :
*
* The Panel collapses to leave its header visible as when not inside a {@link Ext.layout.container.Border border
* layout}.
*/
/**
* @cfg {Ext.Component/Object} placeholder
* **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
* {@link Ext.layout.container.Border border layout} when not using the `'header'` {@link #collapseMode}.**
*
* **Optional.** A Component (or config object for a Component) to show in place of this Panel when this Panel is
* collapsed by a {@link Ext.layout.container.Border border layout}. Defaults to a generated {@link Ext.panel.Header
* Header} containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.
*/
/**
* @cfg {Boolean} floatable
* **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
* {@link Ext.layout.container.Border border layout}.**
*
* true to allow clicking a collapsed Panel's {@link #placeholder} to display the Panel floated above the layout,
* false to force the user to fully expand a collapsed region by clicking the expand button to see it again.
*/
floatable: true,
* @cfg {Boolean} overlapHeader
* True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and
* is done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header
* which does not have frame:true, this will need to be set to true.
*/
/**
* @cfg {Boolean} collapsible
* True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button
* area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.
*
* See {@link #collapseMode} and {@link #collapseDirection}
*/
collapsible: false,
/**
* @cfg {Boolean} collapseDirection
* The direction to collapse the Panel when the toggle button is clicked.
*
* Defaults to the {@link #headerPosition}
*
* **Important: This config is _ignored_ for {@link #collapsible} Panels which are direct child items of a {@link
* Ext.layout.container.Border border layout}.**
*
* Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
*/
/**
* @cfg {Boolean} closable
* True to display the 'close' tool button and allow the user to close the window, false to hide the button and
* disallow closing the window.
*
* By default, when close is requested by clicking the close button in the header, the {@link #method-close} method will be
* called. This will _{@link Ext.Component#method-destroy destroy}_ the Panel and its content meaning that it may not be
* reused.
*
* To make closing a Panel _hide_ the Panel so that it may be reused, set {@link #closeAction} to 'hide'.
*/
closable: false,
/**
* @cfg {String} closeAction
* The action to take when the close header tool is clicked:
*
* - **`'{@link #method-destroy}'`** :
*
* {@link #method-remove remove} the window from the DOM and {@link Ext.Component#method-destroy destroy} it and all descendant
* Components. The window will **not** be available to be redisplayed via the {@link #method-show} method.
*
* - **`'{@link #method-hide}'`** :
*
* {@link #method-hide} the window by setting visibility to hidden and applying negative offsets. The window will be
* available to be redisplayed via the {@link #method-show} method.
*
* **Note:** This behavior has changed! setting *does* affect the {@link #method-close} method which will invoke the
* approriate closeAction.
*/
closeAction: 'destroy',
/**
* @cfg {Object/Object[]} dockedItems
* A component or series of components to be added as docked items to this panel. The docked items can be docked to
* either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:
*
* var panel = new Ext.panel.Panel({
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'top',
* items: [{
* text: 'Docked to the top'
* }]
* }]
* });
*/
/**
* @cfg {Number} placeholderCollapseHideMode
* The {@link Ext.dom.Element#setVisibilityMode mode} for hiding collapsed panels when
* using {@link #collapseMode} "placeholder".
*/
placeholderCollapseHideMode: Ext.Element.VISIBILITY,
* @cfg {Boolean} preventHeader
* @deprecated 4.1.0 Use {@link #header} instead.
* Prevent a Header from being created and shown.
*/
preventHeader: false,
* @cfg {Boolean/Object} header
* Pass as `false` to prevent a Header from being created and shown.
*
* Pass as a config object (optionally containing an `xtype`) to custom-configure this Panel's header.
*
*/
header: undefined,
* @cfg {String} headerPosition
* Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
*/
headerPosition: 'top',
/**
* @cfg {Boolean} frame
* True to apply a frame to the panel.
*/
frame: false,
* @cfg {Boolean} frameHeader
* True to apply a frame to the panel panels header (if 'frame' is true).
*/
frameHeader: true,
/**
* @cfg {Object[]/Ext.panel.Tool[]} tools
* An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as
* child components of the header container. They can be accessed using {@link #down} and {#query}, as well as the
* other component methods. The toggle tool is automatically created if {@link #collapsible} is set to true.
*
* Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the
* visual button. Any required functionality must be provided by adding handlers that implement the necessary
* behavior.
*
* Example usage:
*
* tools:[{
* type:'refresh',
* tooltip: 'Refresh form Data',
* // hidden:true,
* handler: function(event, toolEl, panel){
* // refresh logic
* }
* },
* {
* type:'help',
* tooltip: 'Get Help',
* handler: function(event, toolEl, panel){
* // show help here
* }
* }]
*/
/**
* @cfg {String} [title='']
* The title text to be used to display in the {@link Ext.panel.Header panel header}. When a
* `title` is specified the {@link Ext.panel.Header} will automatically be created and displayed unless
* {@link #header} is set to `false`.
*/
/**
* @cfg {String} [titleAlign='left']
* May be `"left"`, `"right"` or `"center"`.
*
* The alignment of the title text within the available space between the icon and the tools.
*/
titleAlign: 'left',
/**
* @cfg {Boolean} [manageHeight=true]: When true, the dock component layout writes
* height information to the panel's DOM elements based on its shrink wrap height
* calculation. This ensures that the browser respects the calculated height.
* When false, the dock component layout will not write heights on the panel or its
* body element. In some simple layout cases, not writing the heights to the DOM may
* be desired because this allows the browser to respond to direct DOM manipulations
* (like animations).
*/
manageHeight: true,
/**
* @cfg {String} iconCls
* CSS class for an icon in the header. Used for displaying an icon to the left of a title.
*/
/**
* @cfg {String} icon
* Path to image for an icon in the header. Used for displaying an icon to the left of a title.
*/
initComponent: function() {
var me = this;
me.addEvents(
/**
* @event beforeclose
* Fires before the user closes the panel. Return false from any listener to stop the close event being
* fired
* @param {Ext.panel.Panel} panel The Panel object
*/
'beforeclose',
/**
* @event close
* Fires when the user closes the panel.
* @param {Ext.panel.Panel} panel The Panel object
*/
'close',
/**
* @event beforeexpand
* Fires before this panel is expanded. Return false to prevent the expand.
* @param {Ext.panel.Panel} p The Panel being expanded.
* @param {Boolean} animate True if the expand is animated, else false.
*/
"beforeexpand",
/**
* @event beforecollapse
* Fires before this panel is collapsed. Return false to prevent the collapse.
* @param {Ext.panel.Panel} p The Panel being collapsed.
* @param {String} direction . The direction of the collapse. One of
*
* - Ext.Component.DIRECTION_TOP
* - Ext.Component.DIRECTION_RIGHT
* - Ext.Component.DIRECTION_BOTTOM
* - Ext.Component.DIRECTION_LEFT
*
* @param {Boolean} animate True if the collapse is animated, else false.
*/
"beforecollapse",
/**
* @event expand
* Fires after this Panel has expanded.
* @param {Ext.panel.Panel} p The Panel that has been expanded.
*/
"expand",
/**
* @event collapse
* Fires after this Panel hass collapsed.
* @param {Ext.panel.Panel} p The Panel that has been collapsed.
*/
"collapse",
/**
* @event titlechange
* Fires after the Panel title has been set or changed.
* @param {Ext.panel.Panel} p the Panel which has been resized.
* @param {String} newTitle The new title.
* @param {String} oldTitle The previous panel title.
*/
'titlechange',
/**
* @event iconchange
* Fires after the Panel icon has been set or changed.
* @param {Ext.panel.Panel} p The Panel which has the icon changed.
* @param {String} newIcon The path to the new icon image.
* @param {String} oldIcon The path to the previous panel icon image.
*/
'iconchange',
/**
* @event iconclschange
* Fires after the Panel iconCls has been set or changed.
* @param {Ext.panel.Panel} p The Panel which has the iconCls changed.
* @param {String} newIconCls The new iconCls.
* @param {String} oldIconCls The previous panel iconCls.
*/
'iconclschange'
);
if (me.collapsible) {
// Save state on these two events.
this.addStateEvents(['expand', 'collapse']);
}
if (me.unstyled) {
me.setUI('plain');
}
if (me.frame) {
me.setUI(me.ui + '-framed');
}
// Backwards compatibility
me.bridgeToolbars();
me.callParent();
me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
// Used to track hidden content elements during collapsed state
me.hiddenOnCollapse = new Ext.dom.CompositeElement();
},
beforeDestroy: function() {
var me = this;
Ext.destroy(
me.placeholder,
me.ghostPanel,
me.dd
);
me.callParent();
},
initAria: function() {
this.callParent();
this.initHeaderAria();
},
getFocusEl: function() {
return this.el;
},
initHeaderAria: function() {
var me = this,
el = me.el,
header = me.header;
if (el && header) {
el.dom.setAttribute('aria-labelledby', header.titleCmp.id);
}
},
getHeader: function() {
return this.header;
},
/**
* Set a title for the panel's header. See {@link Ext.panel.Header#title}.
* @param {String} newTitle
*/
setTitle: function(newTitle) {
var me = this,
oldTitle = me.title,
header = me.header,
reExpander = me.reExpander,
placeholder = me.placeholder;
me.title = newTitle;
if (header) {
if (header.isHeader) {
header.setTitle(newTitle);
} else {
header.title = newTitle;
}
}
if (reExpander) {
reExpander.setTitle(newTitle);
}
if (placeholder && placeholder.setTitle) {
placeholder.setTitle(newTitle);
}
me.fireEvent('titlechange', me, newTitle, oldTitle);
},
/**
* Set the iconCls for the panel's header. See {@link Ext.panel.Header#iconCls}. It will fire the
* {@link #iconclschange} event after completion.
* @param {String} newIconCls The new CSS class name
*/
setIconCls: function(newIconCls) {
var me = this,
oldIconCls = me.iconCls,
header = me.header,
placeholder = me.placeholder;
me.iconCls = newIconCls;
if (header) {
if (header.isHeader) {
header.setIconCls(newIconCls);
} else {
header.iconCls = newIconCls;
}
}
if (placeholder && placeholder.setIconCls) {
placeholder.setIconCls(newIconCls);
}
me.fireEvent('iconclschange', me, newIconCls, oldIconCls);
},
/**
* Set the icon for the panel's header. See {@link Ext.panel.Header#icon}. It will fire the
* {@link #iconchange} event after completion.
* @param {String} newIcon The new icon path
*/
setIcon: function(newIcon) {
var me = this,
oldIcon = me.icon,
header = me.header,
placeholder = me.placeholder;
me.icon = newIcon;
if (header) {
if (header.isHeader) {
header.setIcon(newIcon);
} else {
header.icon = newIcon;
}
}
if (placeholder && placeholder.setIcon) {
placeholder.setIcon(newIcon);
}
me.fireEvent('iconchange', me, newIcon, oldIcon);
},
bridgeToolbars: function() {
var me = this,
docked = [],
fbar,
fbarDefaults,
minButtonWidth = me.minButtonWidth;
function initToolbar (toolbar, pos, useButtonAlign) {
if (Ext.isArray(toolbar)) {
toolbar = {
xtype: 'toolbar',
items: toolbar
};
}
else if (!toolbar.xtype) {
toolbar.xtype = 'toolbar';
}
toolbar.dock = pos;
if (pos == 'left' || pos == 'right') {
toolbar.vertical = true;
}
// Legacy support for buttonAlign (only used by buttons/fbar)
if (useButtonAlign) {
toolbar.layout = Ext.applyIf(toolbar.layout || {}, {
// default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
pack: { left:'start', center:'center' }[me.buttonAlign] || 'end'
});
}
return toolbar;
}
// Short-hand toolbars (tbar, bbar and fbar plus new lbar and rbar):
/**
* @cfg {String} buttonAlign
* The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to
* 'right' for buttons/fbar, 'left' for other toolbar types).
*
* **NOTE:** The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you
* would add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.
*/
/**
* @cfg {Object/Object[]} tbar
* Convenience config. Short for 'Top Bar'.
*
* tbar: [
* { xtype: 'button', text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'top',
* items: [
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*/
if (me.tbar) {
docked.push(initToolbar(me.tbar, 'top'));
me.tbar = null;
}
/**
* @cfg {Object/Object[]} bbar
* Convenience config. Short for 'Bottom Bar'.
*
* bbar: [
* { xtype: 'button', text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'bottom',
* items: [
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*/
if (me.bbar) {
docked.push(initToolbar(me.bbar, 'bottom'));
me.bbar = null;
}
/**
* @cfg {Object/Object[]} buttons
* Convenience config used for adding buttons docked to the bottom of the panel. This is a
* synonym for the {@link #fbar} config.
*
* buttons: [
* { text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'bottom',
* ui: 'footer',
* defaults: {minWidth: {@link #minButtonWidth}},
* items: [
* { xtype: 'component', flex: 1 },
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*
* The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
* each of the buttons in the buttons toolbar.
*/
if (me.buttons) {
me.fbar = me.buttons;
me.buttons = null;
}
/**
* @cfg {Object/Object[]} fbar
* Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.
*
* fbar: [
* { type: 'button', text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'bottom',
* ui: 'footer',
* defaults: {minWidth: {@link #minButtonWidth}},
* items: [
* { xtype: 'component', flex: 1 },
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*
* The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
* each of the buttons in the fbar.
*/
if (me.fbar) {
fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign
fbar.ui = 'footer';
// Apply the minButtonWidth config to buttons in the toolbar
if (minButtonWidth) {
fbarDefaults = fbar.defaults;
fbar.defaults = function(config) {
var defaults = fbarDefaults || {};
if ((!config.xtype || config.xtype === 'button' || (config.isComponent && config.isXType('button'))) &&
!('minWidth' in defaults)) {
defaults = Ext.apply({minWidth: minButtonWidth}, defaults);
}
return defaults;
};
}
docked.push(fbar);
me.fbar = null;
}
/**
* @cfg {Object/Object[]} lbar
* Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).
*
* lbar: [
* { xtype: 'button', text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'left',
* items: [
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*/
if (me.lbar) {
docked.push(initToolbar(me.lbar, 'left'));
me.lbar = null;
}
/**
* @cfg {Object/Object[]} rbar
* Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).
*
* rbar: [
* { xtype: 'button', text: 'Button 1' }
* ]
*
* is equivalent to
*
* dockedItems: [{
* xtype: 'toolbar',
* dock: 'right',
* items: [
* { xtype: 'button', text: 'Button 1' }
* ]
* }]
*/
if (me.rbar) {
docked.push(initToolbar(me.rbar, 'right'));
me.rbar = null;
}
if (me.dockedItems) {
if (!Ext.isArray(me.dockedItems)) {
me.dockedItems = [me.dockedItems];
}
me.dockedItems = me.dockedItems.concat(docked);
} else {
me.dockedItems = docked;
}
},
isPlaceHolderCollapse: function(){
return this.collapseMode == 'placeholder';
},
onBoxReady: function(){
this.callParent();
if (this.collapsed) {
this.setHiddenDocked();
}
},
beforeRender: function() {
var me = this,
wasCollapsed;
me.callParent();
// Add class-specific header tools.
// Panel adds collapsible and closable.
me.initTools();
// Dock the header/title unless we are configured specifically not to create a header
if (!(me.preventHeader || (me.header === false))) {
me.updateHeader();
}
// If we are rendering collapsed, we still need to save and modify various configs
if (me.collapsed) {
if (me.isPlaceHolderCollapse()) {
me.hidden = true;
// This will insert the placeholder Component into the ownerCt's child collection
// Its getRenderTree call which is calling this will then iterate again and
// recreate the child items array to include the new Component.
me.placeholderCollapse();
wasCollapsed = me.collapsed;
// Temporarily clear the flag so that the header is rendered with a collapse tool in it.
// Placeholder collapse panels never really collapse, they just hide. The tool is always
// a collapse tool.
me.collapsed = false;
} else {
me.beginCollapse();
me.addClsWithUI(me.collapsedCls);
}
}
// Restore the flag if we are being rendered initially placeholder collapsed.
if (wasCollapsed) {
me.collapsed = wasCollapsed;
}
},
/**
* @private
* Tools are a Panel-specific capabilty.
* Panel uses initTools. Subclasses may contribute tools by implementing addTools.
*/
initTools: function() {
var me = this;
me.tools = me.tools ? Ext.Array.clone(me.tools) : [];
// Add a collapse tool unless configured to not show a collapse tool
// or to not even show a header.
if (me.collapsible && !(me.hideCollapseTool || me.header === false || me.preventHeader)) {
me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
me.collapseTool = me.expandTool = Ext.widget({
xtype: 'tool',
type: (me.collapsed && !me.isPlaceHolderCollapse()) ? ('expand-' + me.getOppositeDirection(me.collapseDirection)) : ('collapse-' + me.collapseDirection),
handler: me.toggleCollapse,
scope: me
});
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
// Add subclass-specific tools.
me.addTools();
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
me.addTool({
type: 'close',
handler: Ext.Function.bind(me.close, me, [])
});
}
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
},
/**
* @private
* @template
* Template method to be implemented in subclasses to add their tools after the collapsible tool.
*/
addTools: Ext.emptyFn,
/**
* Closes the Panel. By default, this method, removes it from the DOM, {@link Ext.Component#method-destroy destroy}s the
* Panel object and all its descendant Components. The {@link #beforeclose beforeclose} event is fired before the
* close happens and will cancel the close action if it returns false.
*
* **Note:** This method is also affected by the {@link #closeAction} setting. For more explicit control use
* {@link #method-destroy} and {@link #method-hide} methods.
*/
close: function() {
if (this.fireEvent('beforeclose', this) !== false) {
this.doClose();
}
},
// private
doClose: function() {
this.fireEvent('close', this);
this[this.closeAction]();
},
* Create, hide, or show the header component as appropriate based on the current config.
* @private
* @param {Boolean} force True to force the header to be created
*/
updateHeader: function(force) {
var me = this,
header = me.header,
title = me.title,
tools = me.tools,
vertical = me.headerPosition == 'left' || me.headerPosition == 'right';
if ((header !== false) && (force || title || (tools && tools.length) || (me.collapsible && !me.titleCollapse))) {
if (header && header.isHeader) {
header.show();
} else {
// Apply the header property to the header config
header = me.header = Ext.widget(Ext.apply({
xtype : 'header',
title : title,
titleAlign : me.titleAlign,
orientation : vertical ? 'vertical' : 'horizontal',
dock : me.headerPosition || 'top',
textCls : me.headerTextCls,
iconCls : me.iconCls,
icon : me.icon,
baseCls : me.baseCls + '-header',
tools : tools,
ui : me.ui,
id : me.id + '_header',
indicateDrag: me.draggable,
frame : me.frame && me.frameHeader,
ignoreParentFrame : me.frame || me.overlapHeader,
ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
listeners : me.collapsible && me.titleCollapse ? {
click: me.toggleCollapse,
scope: me
} : null
}, me.header));
me.addDocked(header, 0);
// Reference the Header's tool array.
// Header injects named references.
me.tools = header.tools;
}
me.initHeaderAria();
} else if (header) {
header.hide();
}
},
// inherit docs
setUI: function(ui) {
var me = this;
me.callParent(arguments);
if (me.header && me.header.rendered) {
me.header.setUI(ui);
}
},
// private
getContentTarget: function() {
return this.body;
},
getTargetEl: function() {
var me = this;
return me.body || me.protoBody || me.frameBody || me.el;
},
// the overrides below allow for collapsed regions inside the border layout to be hidden
// inherit docs
isVisible: function(deep){
var me = this;
if (me.collapsed && me.placeholder) {
return me.placeholder.isVisible(deep);
}
return me.callParent(arguments);
},
// inherit docs
onHide: function(){
var me = this;
if (me.collapsed && me.placeholder) {
me.placeholder.hide();
} else {
me.callParent(arguments);
}
},
// inherit docs
onShow: function(){
var me = this;
if (me.collapsed && me.placeholder) {
// force hidden back to true, since this gets set by the layout
me.hidden = true;
me.placeholder.show();
} else {
me.callParent(arguments);
}
},
onRemoved: function(destroying) {
var me = this;
me.callParent(arguments);
// If we are removed but not being destroyed, ensure our placeholder is also removed but not destroyed
// If we are being destroyed, our destroy processing will destroy the placeholder.
if (me.placeholder && !destroying) {
me.ownerCt.remove(me.placeholder, false);
}
},
addTool: function(tools) {
tools = [].concat(tools);
var me = this,
header = me.header,
t,
tLen = tools.length,
tool;
for (t = 0; t < tLen; t++) {
tool = tools[t];
me.tools.push(tool);
if (header) {
header.addTool(tool);
}
}
me.updateHeader();
},
getOppositeDirection: function(d) {
var c = Ext.Component;
switch (d) {
case c.DIRECTION_TOP:
return c.DIRECTION_BOTTOM;
case c.DIRECTION_RIGHT:
return c.DIRECTION_LEFT;
case c.DIRECTION_BOTTOM:
return c.DIRECTION_TOP;
case c.DIRECTION_LEFT:
return c.DIRECTION_RIGHT;
}
},
getWidthAuthority: function() {
if (this.collapsed && this.collapsedHorizontal()) {
return 1; // the panel determine's its own width
}
return this.callParent();
},
getHeightAuthority: function() {
if (this.collapsed && this.collapsedVertical()) {
return 1; // the panel determine's its own height
}
return this.callParent();
},
collapsedHorizontal: function () {
var dir = this.getCollapsed();
return dir == 'left' || dir == 'right';
},
collapsedVertical: function () {
var dir = this.getCollapsed();
return dir == 'top' || dir == 'bottom';
},
getCollapsed: function() {
var me = this;
// The collapsed flag, when the Panel is collapsed acts as the direction in which the collapse took
// place. It can still be tested as truthy/falsy if only a truth value is required.
if (me.collapsed === true) {
return me.collapseDirection;
}
return me.collapsed;
},
getState: function() {
var me = this,
state = me.callParent(),
memento;
state = me.addPropertyToState(state, 'collapsed');
// If a collapse has taken place, use remembered values as the dimensions.
if (me.collapsed) {
memento = me.collapseMemento;
memento = memento && memento.data;
if (me.collapsedVertical()) {
if (state) {
delete state.height;
}
if (memento) {
state = me.addPropertyToState(state, 'height', memento.height);
}
} else {
if (state) {
delete state.width;
}
if (memento) {
state = me.addPropertyToState(state, 'width', memento.width);
}
}
}
return state;
},
findReExpander: function (direction) {
var me = this,
c = Ext.Component,
dockedItems = me.dockedItems.items,
dockedItemCount = dockedItems.length,
comp, i;
// never use the header if we're in collapseMode mini
if (me.collapseMode == 'mini') {
return;
}
switch (direction) {
case c.DIRECTION_TOP:
case c.DIRECTION_BOTTOM:
// Attempt to find a reExpander Component (docked in a horizontal orientation)
// Also, collect all other docked items which we must hide after collapse.
for (i = 0; i < dockedItemCount; i++) {
comp = dockedItems[i];
if (!comp.hidden) {
if (comp.isHeader && (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
return comp;
}
}
}
break;
case c.DIRECTION_LEFT:
case c.DIRECTION_RIGHT:
// Attempt to find a reExpander Component (docked in a vecrtical orientation)
// Also, collect all other docked items which we must hide after collapse.
for (i = 0; i < dockedItemCount; i++) {
comp = dockedItems[i];
if (!comp.hidden) {
if (comp.isHeader && (comp.dock == 'left' || comp.dock == 'right')) {
return comp;
}
}
}
break;
default:
throw('Panel#findReExpander must be passed a valid collapseDirection');
}
},
getReExpander: function (direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
reExpander = me.reExpander || me.findReExpander(collapseDir);
me.expandDirection = me.getOppositeDirection(collapseDir);
if (!reExpander) {
// We did not find a Header of the required orientation: create one.
me.reExpander = reExpander = me.createReExpander(collapseDir, {
dock: collapseDir,
cls: Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
ownerCt: me,
ownerLayout: me.componentLayout
});
me.dockedItems.insert(0, reExpander);
}
return reExpander;
},
createReExpander: function(direction, defaults) {
var me = this,
isLeft = direction == 'left',
isRight = direction == 'right',
isVertical = isLeft || isRight,
toolAtTop,
result = Ext.apply({
hideMode: 'offsets',
title: me.title,
orientation: isVertical ? 'vertical' : 'horizontal',
textCls: me.headerTextCls,
icon: me.icon,
iconCls: me.iconCls,
baseCls: me.baseCls + '-header',
ui: me.ui,
frame: me.frame && me.frameHeader,
ignoreParentFrame: me.frame || me.overlapHeader,
indicateDrag: me.draggable
}, 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) {
toolAtTop = isLeft || (isRight && me.isPlaceHolderCollapse());
result[toolAtTop ? 'items' : '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));
return result;
},
// private
// Create the class array to add to the Header when collpsed.
getHeaderCollapsedClasses: function(header) {
var me = this,
collapsedCls = me.collapsedCls,
collapsedClasses;
collapsedClasses = [ collapsedCls, collapsedCls + '-' + header.dock];
if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
collapsedClasses.push(collapsedCls + '-border-' + header.dock);
}
return collapsedClasses;
},
/**
* @private
* Called before the change from default, configured state into the collapsed state.
* This method may be called at render time to enable rendering in an initially collapsed state,
* or at runtime when an existing, fully layed out Panel may be collapsed.
* It basically saves configs which need to be clobbered for the duration of the collapsed state.
*/
beginCollapse: function() {
var me = this,
lastBox = me.lastBox,
rendered = me.rendered,
collapseMemento = me.collapseMemento || (me.collapseMemento = new Ext.util.Memento(me)),
sizeModel = me.getSizeModel(),
reExpander;
// When we collapse a panel, the panel is in control of one dimension (depending on
// collapse direction) and sets that on the component. We must restore the user's
// original value (including non-existance) when we expand. Using this technique, we
// mimic setCalculatedSize for the dimension we do not control and setSize for the
// one we do (only while collapsed).
// Additionally, the panel may have a shrink wrapped width and/or height. For shrinkWrapped
// panels this can be problematic, since a collapsed, shrink-wrapped panel has no way
// of determining its width (or height if the collapse direction is horizontal). It is
// therefore necessary to capture both the width and height regardless of collapse direction.
// This allows us to set a configured width or height on the panel when it is collapsed,
// and it will be restored to an unconfigured-width shrinkWrapped state on expand.
collapseMemento.capture(['height', 'minHeight', 'width', 'minWidth']);
if (lastBox) {
collapseMemento.capture(['x', 'y', 'height', 'width'], lastBox, 'last.');
}
// If the panel has a shrinkWrapped height/width and is already rendered, configure its width/height as its calculated width/height,
// so that the collapsed header will have the same width or height as the panel did before it was collapsed.
// If the shrinkWrapped panel has not yet been rendered, as will be the case when a panel is initially configured with
// collapsed:true, we attempt to use the configured width/height, and fall back to minWidth or minHeight if
// width/height has not been configured, and fall back to a value of 100 if a minWidth/minHeight has not been configured.
if (me.collapsedVertical()) {
if (sizeModel.width.shrinkWrap) {
me.width = rendered ? me.getWidth() : me.width || me.minWidth || 100;
}
delete me.height;
me.minHeight = 0;
} else if (me.collapsedHorizontal()) {
if (sizeModel.height.shrinkWrap) {
me.height = rendered ? me.getHeight() : me.height || me.minHeight || 100;
}
delete me.width;
me.minWidth = 0;
}
if (me.ownerCt) {
me.ownerCt.getLayout().beginCollapse(me);
}
// Get a reExpander header. This will return the Panel Header if the Header is in the correct orientation
// If we are using the Header as the reExpander, change its UI to collapsed state
if (!me.isPlaceHolderCollapse()) {
if (me.header === (reExpander = me.getReExpander())) {
me.header.addClsWithUI(me.getHeaderCollapsedClasses(me.header));
// Ensure that the reExpander has the correct framing applied.
if (me.header.rendered) {
me.header.updateFrame();
}
}
// We're going to use a temporary reExpander: show it.
else {
if (reExpander.el) {
reExpander.el.show();
reExpander.hidden = false;
}
}
}
if (me.resizer) {
me.resizer.disable();
}
},
beginExpand: function() {
var me = this,
lastBox = me.lastBox,
collapseMemento = me.collapseMemento,
reExpander;
collapseMemento.restore(['height', 'minHeight', 'width', 'minWidth']);
if (lastBox) {
collapseMemento.restore(['x', 'y', 'height', 'width'], true, lastBox, 'last.');
}
if (me.ownerCt) {
me.ownerCt.getLayout().beginExpand(me);
}
if (!me.isPlaceHolderCollapse()) {
// If we have been using our Header as the reExpander then restore the Header to expanded UI
if (me.header === (reExpander = me.getReExpander())) {
me.header.removeClsWithUI(me.getHeaderCollapsedClasses(me.header));
// Ensure that the reExpander has the correct framing applied.
if (me.header.rendered) {
me.header.updateFrame();
}
}
// We've been using a temporary reExpander: hide it.
else {
reExpander.hidden = true;
reExpander.el.hide();
}
}
if (me.resizer) {
me.resizer.enable();
}
},
/**
* Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which
* the collapse takes place will remain visible. Fires the {@link #beforecollapse} event which will cancel the
* collapse action if it returns false.
*
* @param {String} direction . The direction to collapse towards. Must be one of
*
* - Ext.Component.DIRECTION_TOP
* - Ext.Component.DIRECTION_RIGHT
* - Ext.Component.DIRECTION_BOTTOM
* - Ext.Component.DIRECTION_LEFT
*
* @param {Boolean} [animate] True to animate the transition, else false (defaults to the value of the
* {@link #animCollapse} panel config)
* @return {Ext.panel.Panel} this
*/
collapse: function(direction, animate) {
var me = this,
collapseDir = direction || me.collapseDirection,
ownerCt = me.ownerCt;
if (me.isCollapsingOrExpanding) {
return me;
}
if (arguments.length < 2) {
animate = me.animCollapse;
}
if (me.collapsed || me.fireEvent('beforecollapse', me, direction, animate) === false) {
return me;
}
if (ownerCt && me.isPlaceHolderCollapse()) {
return me.placeholderCollapse(direction, animate);
}
me.collapsed = collapseDir;
me.beginCollapse();
me.fireHierarchyEvent('collapse');
return me.doCollapseExpand(1, animate);
},
doCollapseExpand: function (flags, animate) {
var me = this,
originalAnimCollapse = me.animCollapse,
ownerLayout = me.ownerLayout;
// we need to temporarily set animCollapse to the animate value here because ContextItem
// uses the animCollapse property to determine if the collapse/expand should be animated
me.animCollapse = animate;
// Flag used by the layouy ContextItem to impose an animation policy based upon the
// collapse direction and the animCollapse setting.
me.isCollapsingOrExpanding = flags;
if (ownerLayout && !animate) {
ownerLayout.onContentChange(me);
} else {
me.updateLayout({ isRoot: true });
}
// set animCollapse back to its original value
me.animCollapse = originalAnimCollapse;
return me;
},
/**
* Invoked after the Panel is Collapsed.
*
* @param {Boolean} animated
*
* @template
* @protected
*/
afterCollapse: function(animated) {
var me = this,
ownerLayout = me.ownerLayout;
me.isCollapsingOrExpanding = 0;
if (me.collapseTool) {
me.collapseTool.setType('expand-' + me.getOppositeDirection(me.collapseDirection));
}
if (ownerLayout && animated) {
ownerLayout.onContentChange(me);
}
me.setHiddenDocked();
me.fireEvent('collapse', me);
},
setHiddenDocked: function(){
// Hide Panel content except reExpander using visibility to prevent focusing of contained elements.
// Track what we hide to re-show on expand
var me = this,
toHide = me.hiddenOnCollapse,
reExpander = me.getReExpander(),
items = me.getDockedItems(),
len = items.length,
i = 0,
item;
toHide.add(me.body);
for (; i < len; i++) {
item = items[i];
if (item && item !== reExpander && item.el) {
toHide.add(item.el);
}
}
toHide.setStyle('visibility', 'hidden');
},
restoreHiddenDocked: function(){
var toShow = this.hiddenOnCollapse;
// Re-show Panel content which was hidden after collapse.
toShow.setStyle('visibility', '');
toShow.clear();
},
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder;
if (!placeholder) {
if (me.floatable || (me.collapsible && me.titleCollapse)) {
listeners = {
click: {
fn: me.floatable ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
},
placeholderCollapse: function(direction, animate) {
var me = this,
ownerCt = me.ownerCt,
collapseDir = direction || me.collapseDirection,
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
placeholder = me.getPlaceholder(direction);
me.isCollapsingOrExpanding = 1;
// Upcoming layout run will ignore this Component
me.hidden = true;
me.collapsed = collapseDir;
if (placeholder.rendered) {
// We may have been added to another Container from that in which we rendered the placeholder
if (placeholder.el.dom.parentNode !== me.el.dom.parentNode) {
me.el.dom.parentNode.insertBefore(placeholder.el.dom, me.el.dom);
}
placeholder.hidden = false;
placeholder.el.show();
ownerCt.updateLayout();
} else {
ownerCt.insert(ownerCt.items.indexOf(me), placeholder);
}
if (me.rendered) {
// We MUST NOT hide using display because that resets all scroll information.
me.el.setVisibilityMode(me.placeholderCollapseHideMode);
if (animate) {
me.el.addCls(floatCls);
placeholder.el.hide();
me.el.slideOut(collapseDir.substr(0, 1), {
preserveScroll: true,
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.el.removeCls(floatCls);
/* We need to show the element so that slideIn will work correctly. However, if we leave it
visible then it can be seen before the animation starts, causing a flicker. The solution,
borrowed from date picker, is to hide it using display none. The slideIn effect includes
a call to fixDisplay() that will undo the display none at the appropriate time.
*/
placeholder.el.show().setStyle('display', 'none').slideIn(collapseDir.substr(0, 1), {
easing: 'linear',
duration: 100,
listeners: {
afteranimate: function() {
placeholder.focus();
me.isCollapsingOrExpanding = 0;
me.fireEvent('collapse', me);
}
}
});
}
}
});
} else {
me.el.hide();
me.isCollapsingOrExpanding = 0;
me.fireEvent('collapse', me);
}
} else {
me.isCollapsingOrExpanding = 0;
me.fireEvent('collapse', me);
}
return me;
},
floatCollapsedPanel: function() {
var me = this,
placeholder = me.placeholder,
pb = placeholder.getBox(true),
myBox,
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
collapsed = me.collapsed,
layoutOwner = me.ownerCt || me,
slideDirection;
// Already floated
if (me.el.hasCls(floatCls)) {
me.slideOutFloatedPanel();
return;
}
if (me.isSliding) {
return;
}
me.isSliding = true;
// 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 = me.el.getRegion().union(placeholder.el.getRegion()).adjust(1, -1, -1, 1);
// If mouse is not within slide Region, slide it out
if (!slideRegion.contains(e.getPoint())) {
me.slideOutFloatedPanel();
}
}
// Lay out in fully expanded mode to ensure we are at the correct size, and collect our expanded box
me.placeholder.el.hide();
me.placeholder.hidden = true;
me.el.show();
me.hidden = false;
me.collapsed = false;
layoutOwner.updateLayout();
myBox = me.getBox(true);
// Then go back immediately to collapsed state from which to initiate the float into view.
me.placeholder.el.show();
me.placeholder.hidden = false;
me.el.hide();
me.hidden = true;
me.collapsed = collapsed;
layoutOwner.updateLayout();
// Monitor for mouseouting of the placeholder. Hide it if they exit for half a second or more
me.placeholderMouseMon = placeholder.el.monitorMouseLeave(500, onMouseLeaveFloated);
me.panelMouseMon = me.el.monitorMouseLeave(500, onMouseLeaveFloated);
me.el.addCls(floatCls);
// Hide collapse tool in header if there is one (we might be headerless)
if (me.collapseTool) {
me.collapseTool.el.hide();
}
switch (me.collapsed) {
case 'top':
me.el.setLeftTop(pb.x, pb.y + pb.height - 1);
slideDirection = 't';
break;
case 'right':
me.el.setLeftTop(pb.x - myBox.width + 1, pb.y);
slideDirection = 'r';
break;
case 'bottom':
me.el.setLeftTop(pb.x, pb.y - myBox.height + 1);
slideDirection = 'b';
break;
case 'left':
me.el.setLeftTop(pb.x + pb.width - 1, pb.y);
slideDirection = 'l';
break;
}
// Remember how we are really collapsed so we can restore it, but also so we can
// become a layoutRoot while we are floated:
me.floatedFromCollapse = me.collapsed;
me.collapsed = me.hidden = false;
me.el.slideIn(slideDirection, {
preserveScroll: true,
listeners: {
afteranimate: function() {
me.isSliding = false;
}
}
});
},
isLayoutRoot: function() {
if (this.floatedFromCollapse) {
return true;
}
return this.callParent();
},
slideOutFloatedPanel: function() {
var me = this,
compEl = this.el,
collapseDirection;
if (me.isSliding) {
return;
}
me.isSliding = true;
me.slideOutFloatedPanelBegin();
if (typeof me.collapsed == 'string') {
collapseDirection = me.collapsed.charAt(0);
}
compEl.slideOut(collapseDirection, {
preserveScroll: true,
listeners: {
afteranimate: function() {
me.slideOutFloatedPanelEnd();
// this would be in slideOutFloatedPanelEnd except that the only other
// caller removes this cls later
me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
me.isSliding = false;
}
}
});
},
/**
* This method begins the slide out of the floated panel.
* @private
*/
slideOutFloatedPanelBegin: function() {
var me = this,
compEl = this.el;
me.collapsed = me.floatedFromCollapse;
me.hidden = true;
me.floatedFromCollapse = null;
// Remove mouse leave monitors
compEl.un(me.panelMouseMon);
me.placeholder.el.un(me.placeholderMouseMon);
},
/**
* This method cleans up after the slide out of the floated panel.
* @private
*/
slideOutFloatedPanelEnd: function() {
if (this.collapseTool) {
this.collapseTool.el.show();
}
},
/**
* Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will
* cancel the expand action if it returns false.
* @param {Boolean} animate True to animate the transition, else false (defaults to the value of the
* {@link #animCollapse} panel config)
* @return {Ext.panel.Panel} this
*/
expand: function(animate) {
var me = this;
if (me.isCollapsingOrExpanding) {
return me;
}
if (!arguments.length) {
animate = me.animCollapse;
}
if (!me.collapsed && !me.floatedFromCollapse) {
return me;
}
if (me.fireEvent('beforeexpand', me, animate) === false) {
return me;
}
if (me.isPlaceHolderCollapse()) {
return me.placeholderExpand(animate);
}
me.restoreHiddenDocked();
me.beginExpand();
me.collapsed = false;
me.fireHierarchyEvent('expand');
return me.doCollapseExpand(2, animate);
},
placeholderExpand: function(animate) {
var me = this,
collapseDir = me.collapsed,
floatCls = Ext.baseCSSPrefix + 'border-region-slide-in',
finalPos,
floatedPos,
slideInDirection;
if (me.floatedFromCollapse) {
floatedPos = me.getPosition(true);
// these are the same cleanups performed by the normal slideOut mechanism:
me.slideOutFloatedPanelBegin();
me.slideOutFloatedPanelEnd();
}
me.isCollapsingOrExpanding = 2;
// Expand me and hide the placeholder
me.placeholder.hidden = true;
me.placeholder.el.hide();
me.collapsed = false;
me.show();
if (animate) {
// Floated, move it back to the floated pos, and thence into the correct place
if (floatedPos) {
finalPos = me.el.getXY();
me.el.setLeftTop(floatedPos[0], floatedPos[1]);
me.el.moveTo(finalPos[0], finalPos[1], {
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.el.removeCls(floatCls);
me.isCollapsingOrExpanding = 0;
me.fireEvent('expand', me);
}
}
});
}
// Not floated, slide it in to the correct place
else {
me.hidden = true;
me.el.addCls(floatCls);
me.el.hide();
me.collapsed = collapseDir;
me.placeholder.show();
slideInDirection = collapseDir.substr(0, 1);
// Slide this Component's el back into place, after which we lay out AGAIN
me.hidden = false;
me.el.slideIn(slideInDirection, {
preserveScroll: true,
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.collapsed = false;
// the ordering of these two lines appears to be important in
// IE9. There is an odd expand issue in IE 9 in the border layout
// example that causes the index1 child of the south dock region
// to get 'hidden' after a collapse / expand cycle. See
// EXTJSIV-5318 for details
me.el.removeCls(floatCls);
me.placeholder.hide();
me.isCollapsingOrExpanding = 0;
me.fireEvent('expand', me);
}
}
});
}
} else {
me.isCollapsingOrExpanding = 0;
me.fireEvent('expand', me);
}
return me;
},
/**
* Invoked after the Panel is Expanded.
*
* @param {Boolean} animated
*
* @template
* @protected
*/
afterExpand: function(animated) {
var me = this,
ownerLayout = me.ownerLayout;
me.isCollapsingOrExpanding = 0;
if (me.collapseTool) {
me.collapseTool.setType('collapse-' + me.collapseDirection);
}
if (ownerLayout && animated) {
ownerLayout.onContentChange(me);
}
me.fireEvent('expand', me);
},
// inherit docs
setBorder: function(border, targetEl) {
if (targetEl) {
// skip out here, the panel will set the border on the body/header during rendering
return;
}
var me = this,
header = me.header;
if (!border) {
border = 0;
} else {
border = Ext.Element.unitizeBox((border === true) ? 1 : border);
}
if (header) {
if (header.isHeader) {
header.setBorder(border);
} else {
header.border = border;
}
}
if (me.rendered && me.bodyBorder !== false) {
me.body.setStyle('border-width', border);
}
me.updateLayout();
me.border = border;
},
/**
* Shortcut for performing an {@link #method-expand} or {@link #method-collapse} based on the current state of the panel.
* @return {Ext.panel.Panel} this
*/
toggleCollapse: function() {
return (this.collapsed || this.floatedFromCollapse) ? this.expand() : this.collapse();
},
// private
getKeyMap : function() {
return this.keyMap || (this.keyMap = new Ext.util.KeyMap(Ext.apply({
target: this.el
}, this.keys)));
},
// private
initDraggable : function(){
/**
* @property {Ext.dd.DragSource} dd
* If this Panel is configured {@link #cfg-draggable}, this property will contain an instance of {@link
* Ext.dd.DragSource} which handles dragging the Panel.
*
* The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} in order to
* supply behaviour for each stage of the drag/drop process. See {@link #cfg-draggable}.
*/
this.dd = new Ext.panel.DD(this, Ext.isBoolean(this.draggable) ? null : this.draggable);
},
// private - helper function for ghost
ghostTools : function() {
var tools = [],
header = this.header,
headerTools = header ? header.query('tool[hidden=false]') : [],
t, tLen, tool;
if (headerTools.length) {
t = 0;
tLen = headerTools.length;
for (; t < tLen; t++) {
tool = headerTools[t];
// Some tools can be full components, and copying them into the ghost
// actually removes them from the owning panel. You could also potentially
// end up with duplicate DOM ids as well. To avoid any issues we just make
// a simple bare-minimum clone of each tool for ghosting purposes.
tools.push({
type: tool.type
});
}
} else {
tools = [{
type: 'placeholder'
}];
}
return tools;
},
// private - used for dragging
ghost: function(cls) {
var me = this,
ghostPanel = me.ghostPanel,
box = me.getBox(),
header;
if (!ghostPanel) {
ghostPanel = new Ext.panel.Panel({
renderTo: document.body,
floating: {
shadow: false
},
frame: me.frame && !me.alwaysFramed,
alwaysFramed: me.alwaysFramed,
overlapHeader: me.overlapHeader,
headerPosition: me.headerPosition,
baseCls: me.baseCls,
cls: me.baseCls + '-ghost ' + (cls ||'')
});
me.ghostPanel = ghostPanel;
}
ghostPanel.floatParent = me.floatParent;
if (me.floating) {
ghostPanel.setZIndex(Ext.Number.from(me.el.getStyle('zIndex'), 0));
} else {
ghostPanel.toFront();
}
if (!(me.preventHeader || (me.header === false))) {
header = ghostPanel.header;
// restore options
if (header) {
header.suspendLayouts();
Ext.Array.forEach(header.query('tool'), header.remove, header);
header.resumeLayouts();
}
ghostPanel.addTool(me.ghostTools());
ghostPanel.setTitle(me.title);
ghostPanel.setIconCls(me.iconCls);
}
ghostPanel.el.show();
ghostPanel.setPagePosition(box.x, box.y);
ghostPanel.setSize(box.width, box.height);
me.el.hide();
return ghostPanel;
},
// private
unghost: function(show, matchPosition) {
var me = this;
if (!me.ghostPanel) {
return;
}
if (show !== false) {
// Show el first, so that position adjustment in setPagePosition
// will work when relative positioned elements have their XY read.
me.el.show();
if (matchPosition !== false) {
me.setPagePosition(me.ghostPanel.el.getXY());
if (me.hideMode == 'offsets') {
// clear the hidden style because we just repositioned
delete me.el.hideModeStyles;
}
}
Ext.defer(me.focus, 10, me);
}
me.ghostPanel.el.hide();
},
beginDrag: function() {
if (this.floatingItems) {
this.floatingItems.hide();
}
},
endDrag: function() {
if (this.floatingItems) {
this.floatingItems.show();
}
},
initResizable: function(resizable) {
if (this.collapsed) {
resizable.disabled = true;
}
this.callParent([resizable]);
}
}, function() {
this.prototype.animCollapse = Ext.enableFx;
});