/**
* 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',
* // One header just for show. There's no data
* columns: [{header: 'Column One'}],
* store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
* // Use 1/3 of Container's height (hint to Box layout)
* flex: 1
* }, {
* 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 example, 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.container.Container',
alias: 'widget.panel',
alternateClassName: 'Ext.Panel',
requires: [
'Ext.panel.Header',
'Ext.util.MixedCollection',
'Ext.toolbar.Toolbar',
'Ext.fx.Anim',
'Ext.panel.DD',
'Ext.XTemplate',
'Ext.layout.component.Dock',
'Ext.util.Memento'
],
mixins: {
docking: 'Ext.container.DockingContainer'
},
/**
* @cfg childEls
* @inheritdoc
*/
childEls: [
'bodyWrap', 'body'
],
/* eslint-disable indent, max-len */
/**
* @cfg renderTpl
* @inheritdoc
*/
renderTpl: [
// headingEl can also be inserted in updateHeader
'<tpl if="headingText">',
'<div id="{id}-headingEl" data-ref="headingEl" role="heading"',
' class="', Ext.baseCSSPrefix, 'hidden-clip" style="height:0">',
'{headingText}',
'</div>',
'</tpl>',
'<tpl if="hasTabGuard">{% this.renderTabGuard(out, values, \'before\'); %}</tpl>',
'<div id="{id}-bodyWrap" data-ref="bodyWrap" class="{baseCls}-bodyWrap"',
'<tpl if="bodyWrapAriaAttributes">',
'<tpl foreach="bodyWrapAriaAttributes"> {$}="{.}"</tpl>',
'<tpl else>',
' role="presentation"',
'</tpl>',
'>',
// If this Panel is framed, the framing template renders the docked items round the frame
'{% this.renderDockedItems(out,values,0); %}',
'<div id="{id}-body" data-ref="body" class="{baseCls}-body<tpl if="bodyCls"> {bodyCls}</tpl>',
' {baseCls}-body-{ui}<tpl if="uiCls">',
'<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl>',
'</tpl>{childElCls}"',
'<tpl if="bodyAriaAttributes">',
'<tpl foreach="bodyAriaAttributes"> {$}="{.}"</tpl>',
'<tpl else>',
' role="presentation"',
'</tpl>',
'<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values);%}',
'</div>',
'{% this.renderDockedItems(out,values,1); %}',
'</div>',
'<tpl if="hasTabGuard">{% this.renderTabGuard(out, values, \'after\'); %}</tpl>'
],
/* eslint-enable indent, max-len */
// <editor-fold desc="Config">
// ***********************************************************************************
// Begin Config
// ***********************************************************************************
// For performance reasons we give the following configs their default values on
// the class body. This prevents the updaters from running on initialization in the
// default configuration scenario
headerPosition: 'top',
iconAlign: 'left',
titleAlign: 'left',
titleRotation: 'default',
titlePosition: 0,
headerConfigs: {
glyph: 1,
icon: 1,
iconAlign: 1,
iconCls: 1,
title: 1,
titleAlign: 1,
titlePosition: 1,
titleRotation: 1
},
beforeRenderConfig: {
/**
* @cfg glyph
* @inheritdoc Ext.panel.Header#cfg-glyph
* @accessor
*/
glyph: null,
/**
* @cfg {'top'/'bottom'/'left'/'right'} [headerPosition='top']
* Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
* @accessor
*/
headerPosition: null,
/**
* @cfg icon
* @inheritdoc Ext.panel.Header#cfg-icon
* @accessor
*/
icon: null,
/**
* @cfg [iconAlign='left']
* @inheritdoc Ext.panel.Header#cfg-iconAlign
* @accessor
*/
iconAlign: null,
/**
* @cfg iconCls
* @inheritdoc Ext.panel.Header#cfg-iconCls
* @accessor
*/
iconCls: null,
/**
* @cfg title
* @inheritdoc Ext.panel.Header#cfg-title
* @localdoc When a `title` is specified, the {@link Ext.panel.Header} will
* automatically be created and displayed unless {@link #header} is set to `false`.
* @accessor
*/
title: null,
/**
* @cfg [titleAlign='left']
* @inheritdoc Ext.panel.Header#cfg-titleAlign
* @accessor
*/
titleAlign: null,
/**
* @cfg [titlePosition=0]
* @inheritdoc Ext.panel.Header#cfg-titlePosition
* @accessor
* @since 6.5.1
*/
titlePosition: null,
/**
* @cfg [titleRotation='default']
* @inheritdoc Ext.panel.Header#cfg-titleRotation
* @accessor
*/
titleRotation: null
},
/**
* @cfg {Boolean/Number} 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 {Boolean} bodyBorder
* A shortcut to add or remove the border on the body of a panel. In the classic theme
* this only applies to a panel which has the {@link #frame} configuration set to `true`.
* @since 2.3.0
*/
/**
* @cfg {String/String[]} bodyCls
* A CSS class, space-delimited string of classes, or array of classes to be applied
* to the panel's body element. The following examples are all valid:
*
* bodyCls: 'foo'
* bodyCls: 'foo bar'
* bodyCls: ['foo', 'bar']
*/
/**
* @cfg {Number/String} [bodyPadding=undefined]
* A shortcut for setting a padding style on the body element. The value can either be
* a number to be applied to all sides, or a normal css string describing padding.
*/
/**
* @cfg {String/Object/Function} bodyStyle
* Custom CSS styles to be applied to the panel's body element, which can be supplied
* as a valid CSS style string, an object containing style property name/value pairs
* or a function that returns such a string or object.
* For example, these two formats are interpreted to be equivalent:
*
* bodyStyle: 'background:#ffc; padding:10px;'
*
* bodyStyle: {
* background: '#ffc',
* padding: '10px'
* }
*
* @since 2.3.0
*/
/**
* @cfg {Boolean} border
* Specify as `false` to render the Panel with zero width borders.
*
* Leaving the value as `true` uses the selected theme's
* {@link Ext.panel.Panel#$panel-border-width}
*
* Defaults to `false` when using or extending Neptune.
*
* **Note:** is ignored when {@link #frame} is set to **true**.
*/
border: true,
/**
* @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'.
* @accessor
*/
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 appropriate closeAction.
*/
closeAction: 'destroy',
/**
* @cfg {String} closeToolText
* Text to be announced by screen readers when the **close**
* {@link Ext.panel.Tool tool} is focused. Will also be set as the close tool's
* {@link Ext.panel.Tool#cfg-tooltip tooltip} text.
*
* **Note:** Applicable when the panel is {@link #closable}: true
* @locale
*/
closeToolText: 'Close panel',
/**
* @cfg {Boolean} collapsed
* `true` to render the panel collapsed, `false` to render it expanded.
*/
collapsed: false,
/**
* @cfg {String} collapsedCls
* A CSS class to add to the panel's element after it has been collapsed.
*/
collapsedCls: 'collapsed',
/**
* @cfg {String} collapseDirection
* The direction to collapse the Panel when the toggle button is clicked.
*
* Defaults to the {@link #cfg-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} 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} 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.
* When a panel is used in a {@link Ext.layout.container.Border border layout}, the
* {@link #floatable} option can influence the behavior of collapsing.
* See {@link #collapseMode} and {@link #collapseDirection}
*/
collapsible: undefined,
/**
* @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 three possible values:
*
* - `undefined` - 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}.
*
* - `"mini"` - The Panel collapses without a visible header.
*/
/**
* @cfg {String} collapseToolText
* Text to be announced by screen readers when **collapse**
* {@link Ext.panel.Tool tool} is focused. Will also be set as the collapse tool's
* {@link Ext.panel.Tool#cfg-tooltip tooltip} text.
*
* **Note:** Applicable when the panel is {@link #collapsible}: true
* @locale
*/
collapseToolText: 'Collapse panel',
/**
* @cfg {String} expandToolText
* Text to be announced by screen readers when **expand** {@link Ext.panel.Tool tool}
* is focused. Will also be set as the expand tool's
* {@link Ext.panel.Tool#cfg-tooltip tooltip} text.
*
* **Note:** Applicable when the panel is {@link #collapsible}: true
* @locale
*/
expandToolText: 'Expand panel',
/**
* @cfg {Boolean} constrain
* True to constrain the panel within its containing element, false to allow it to fall outside
* of its containing element. By default floating components such as Windows will be rendered to
* `document.body`. To render and constrain the window within another element specify
* {@link #renderTo}. Optionally the header only can be constrained using
* {@link #constrainHeader}.
*/
constrain: false,
/**
* @cfg {Boolean} constrainHeader
* True to constrain the panel header within its containing element (allowing the panel body
* to fall outside of its containing element) or false to allow the header to fall outside
* its containing element.
* Optionally the entire panel can be constrained using {@link #constrain}.
*/
constrainHeader: false,
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype"}
/**
* @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'
* }]
* }]
* });
*/
dockedItems: null,
/**
* @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 preferred 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.
*/
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype", defaultType: "toolbar"}
/**
* @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' }
* ]
* }]
*/
tbar: null,
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype", defaultType: "toolbar"}
/**
* @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' }
* ]
* }]
*/
bbar: null,
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype", defaultType: "toolbar"}
/**
* @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: 200
* },
* 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.
*/
fbar: null,
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype", defaultType: "toolbar"}
/**
* @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' }
* ]
* }]
*/
lbar: null,
// @cmd-auto-dependency {aliasPrefix: "widget.", typeProperty: "xtype", defaultType: "toolbar"}
/**
* @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' }
* ]
* }]
*/
rbar: null,
/**
* @cfg {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: 200
* },
* 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.
*/
buttons: null,
/**
* @cfg draggable
* @inheritdoc
* @localdoc **NOTE:** The private {@link Ext.panel.DD} class is used instead of
* ComponentDragger when {@link #simpleDrag} is false (_default_). In this case you
* may pass a config for {@link Ext.dd.DragSource}.
*
* See also {@link #dd}.
*/
/**
* @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} frame
* True to apply a frame to the panel.
*
* **Note:** `frame: true` overrides {@link #border border:false}
*/
frame: false,
/**
* @cfg {Boolean} frameHeader
* True to apply a frame to the panel panels header (if 'frame' is true).
*/
frameHeader: true,
/**
* @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.
*
* See {@link Ext.panel.Header} for all the options that may be specified here.
*
* A {@link Ext.panel.Header panel header} is a {@link Ext.container.Container} which contains
* the Panel's {@link #title} and {@link #tools}. You may also configure the Panel's `header`
* option with its own child items which go *before* the {@link #tools}
*
* By default the panel {@link #title} is inserted after items configured in this config,
* but before any tools. To insert the title at any point in the full array, specify the
* {@link Ext.panel.Header#cfg-titlePosition titlePosition} config:
*
* new Ext.panel.Panel({
* title: 'Test',
* tools: [{
* type: 'refresh'
* }, {
* type: 'help'
* }],
* titlePosition: 2 // Title will come AFTER the two tools
* ...
* });
*
*/
/**
* @cfg {String} headerOverCls
* Optional CSS class to apply to the header element on mouseover
*/
/**
* @cfg {Boolean} hideCollapseTool
* `true` to hide the expand/collapse toggle button when `{@link #collapsible} == true`,
* `false` to display it.
*/
hideCollapseTool: false,
/**
* @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} maskElement
*
* The name of the element property in this Panel to mask when masked by a LoadMask.
*
* Defaults to `"el"` to indicate that any LoadMask should be rendered into this Panel's
* encapsulating element.
*
* This could be configured to be `"body"` so that only the body is masked and toolbars
* and the header are still mouse-accessible.
*/
maskElement: 'el',
/**
* @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} 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 {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 {Number} [placeholderCollapseHideMode=Ext.Element.VISIBILITY]
* 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} maintainTitlePosition
* For panels that are collapsed to the left or right,
* {@link Ext.panel.Header#titlePosition} may be temporarily changed for UI consistency.
* Setting this config to true will force the specified titlePosition to be maintained
* @since 6.5.1
*/
maintainTitlePosition: false,
/**
* @cfg [shrinkWrap=2]
* @inheritdoc
* @localdoc ##Panels (subclasses and instances)
*
* By default, when a panel is configured to shrink wrap in a given dimension, only
* the panel's "content" (items and html content inside the panel body) contributes
* to its size, and the content of docked items is ignored. Optionally you can use
* the {@link #shrinkWrapDock} config to allow docked items to contribute to the
* panel's size as well. For example, if shrinkWrap and shrinkWrapDock are both set
* to true, the width of the panel would be the width of the panel's content and the
* panel's header text.
*/
/**
* @cfg {Boolean/Number} shrinkWrapDock
* Allows for this panel to include the {@link #dockedItems} when trying to determine
* the overall size of the panel. This option is only applicable when this panel is
* also shrink wrapping in the same dimensions. See {@link Ext.Panel#shrinkWrap} for
* an explanation of the configuration options.
*/
shrinkWrapDock: false,
/**
* @cfg {Boolean} [simpleDrag=false]
* When {@link #cfg-draggable} is `true`, Specify this as `true` to cause the `draggable`
* config to work the same as it does in {@link Ext.window.Window Window}. This Panel
* just becomes movable. No DragDrop instances receive any notifications.
* For example:
*
* @example
* var win = Ext.create('widget.window', {
* height: 300,
* width: 300,
* title: 'Constraining Window',
* closable: false,
* items: {
* title: "Floating Panel",
* width: 100,
* height: 100,
* floating: true,
* draggable: true,
* constrain: true,
* simpleDrag: true
* }
* });
* win.show();
* // Floating components begin life hidden
* win.child('[title=Floating Panel]').show();
*
*/
/**
* @cfg stateEvents
* @inheritdoc Ext.state.Stateful#cfg-stateEvents
* @localdoc By default the following stateEvents are added:
*
* - {@link #event-resize} - _(added by Ext.Component)_
* - {@link #event-collapse}
* - {@link #event-expand}
*/
/**
* @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). When a panel is used in a {@link Ext.layout.container.Border border layout},
* the {@link #floatable} option can influence the behavior of collapsing.
*/
titleCollapse: undefined,
/**
* @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, panelHeader) {
* // refresh logic
* }
* },
* {
* type:'help',
* tooltip: 'Get Help',
* callback: function(panel, tool, event) {
* // show help here
* }
* }]
*
* The difference between `handler` and `callback` is the signature. For details on
* the distinction, see {@link Ext.panel.Tool}.
*/
/**
* @cfg {String} defaultButton
* Reference name of the component to act as the default button for this Panel.
* Default button is activated by pressing Enter key while focus is contained within
* the Panel's {@link #defaultButtonTarget}.
*
* The most obvious use for `defaultButton` is submitting a form:
*
* var loginWindow = new Ext.window.Window({
* autoShow: true,
* width: 300,
* layout: 'form',
* title: 'Enter login information',
* referenceHolder: true,
* defaultFocus: 'textfield',
* defaultButton: 'okButton',
*
* items: [{
* xtype: 'textfield',
* fieldLabel: 'User name'
* }, {
* xtype: 'textfield',
* fieldLabel: 'Password'
* }],
*
* buttons: [{
* reference: 'okButton',
* text: 'Login',
* handler: function() {
* Ext.Msg.alert('Submit', 'Your login is being processed');
* }
* }]
* });
*/
/**
* @cfg {String} [defaultButtonTarget] Name of the element that will be the target of
* {@link #defaultButton} keydown listener. The default element is Panel body, which
* means that pressing Enter key while focus is on docked items will not fire `defaultButton`
* action.
*
* If you want `defaultButton` action to fire in docked items, set this config to `"el"`.
*/
// ***********************************************************************************
// End Config
// ***********************************************************************************
// </editor-fold>
// <editor-fold desc="Properties">
// ***********************************************************************************
// Begin Properties
// ***********************************************************************************
/**
* @cfg baseCls
* @inheritdoc
*/
baseCls: Ext.baseCSSPrefix + 'panel',
/**
* @property {Ext.dom.Element} body
* The Panel's body {@link Ext.dom.Element Element} which may be used to contain HTML content.
* The content may be specified in the {@link #html} config, or it may be loaded using the
* {@link #loader} config. Read-only.
*
* If this is used to load visible HTML elements in either way, then
* the Panel may not be used as a Layout for hosting nested Panels.
*
* If this Panel is intended to be used as the host of a Layout (See {@link #cfg!layout}
* then the body Element must not be loaded or changed - it is under the control
* of the Panel's Layout.
*
* @readonly
*/
bodyPosProps: {
x: 'x',
y: 'y'
},
/**
* @cfg componentLayout
* @inheritdoc
*/
componentLayout: 'dock',
/**
* @property contentPaddingProperty
* @inheritdoc
*/
contentPaddingProperty: 'bodyPadding',
emptyArray: [],
/**
* @property {Boolean} isPanel
* `true` in this class to identify an object as an instantiated Panel, or subclass thereof.
*/
isPanel: true,
/**
* @property defaultBindProperty
* @inheritdoc
*/
defaultBindProperty: 'title',
// ***********************************************************************************
// End Properties
// ***********************************************************************************
// </editor-fold>
// <editor-fold desc="Events">
// ***********************************************************************************
// Begin Events
// ***********************************************************************************
/**
* @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
*/
/**
* @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.
*/
/**
* @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.
*/
/**
* @event close
* Fires when the user closes the panel.
* @param {Ext.panel.Panel} panel The Panel object
*/
/**
* @event collapse
* Fires after this Panel has collapsed.
* @param {Ext.panel.Panel} p The Panel that has been collapsed.
*/
/**
* @event expand
* Fires after this Panel has expanded.
* @param {Ext.panel.Panel} p The Panel that has been expanded.
*/
/**
* @event float
* Fires after a collapsed Panel has been "floated" by clicking on
* it's header. Only applicable when the Panel is an item in a
* {@link Ext.layout.container.Border Border Layout}.
*/
/**
* @event glyphchange
* Fired when the Panel glyph has been changed by the {@link #setGlyph} method.
* @param {Ext.panel.Panel} this
* @param {Number/String} newGlyph
* @param {Number/String} oldGlyph
*/
/**
* @event iconalignchange
* Fires after the Panel iconAlign has been set or changed.
* @param {Ext.panel.Panel} this The Panel which has the iconAlign changed.
* @param {String} newIconAlign
* @param {String} oldIconAlign
* @since 6.5.1
*/
/**
* @event iconchange
* Fires after the Panel icon has been set or changed.
* @param {Ext.panel.Panel} this 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.
*/
/**
* @event iconclschange
* Fires after the Panel iconCls has been set or changed.
* @param {Ext.panel.Panel} this The Panel which has the iconCls changed.
* @param {String} newIconCls The new iconCls.
* @param {String} oldIconCls The previous panel iconCls.
*/
/**
* @event titlealignchange
* Fires after the Panel titleAlign has been set or changed.
* @param {Ext.panel.Panel} this the Panel which has the titleAlign changed.
* @param {String} newTitleAlign
* @param {String} oldTitleAlign
* @since 6.5.1
*/
/**
* @event titlechange
* Fires after the Panel title has been set or changed.
* @param {Ext.panel.Panel} this the Panel which has been resized.
* @param {String} newTitle The new title.
* @param {String} oldTitle The previous panel title.
*/
/**
* @event titlepositionchange
* Fires after the Panel titlePosition has been set or changed.
* @param {Ext.panel.Panel} this the Panel which has the titlePosition changed.
* @param {String} newTitlePosition
* @param {String} oldTitlePosition
* @since 6.5.1
*/
/**
* @event titlerotationchange
* Fires after the Panel titleRotation has been set or changed.
* @param {Ext.panel.Panel} this the Panel which has the titleRotation changed.
* @param {String} newTitleRotation
* @param {String} oldTitleRotation
* @since 6.5.1
*/
/**
* @event unfloat
* Fires after a "floated" Panel has returned to it's collapsed state
* as a result of the mouse leaving the Panel. Only applicable when
* the Panel is an item in a
* {@link Ext.layout.container.Border Border Layout}.
*/
// ***********************************************************************************
// End Events
// ***********************************************************************************
// </editor-fold>
// <editor-fold desc="Component Methods">
// ***********************************************************************************
// Begin Methods
// ***********************************************************************************
/**
* Adds a CSS class to the body element. If not rendered, the class will
* be added when the panel is rendered.
* @param {String/String[]} cls The class to add
* @return {Ext.panel.Panel} this
*/
addBodyCls: function(cls) {
var me = this,
body = me.rendered ? me.body : me.getProtoBody();
body.addCls(cls);
return me;
},
/**
* Add tools to this panel {@link Ext.panel.Header header}
*
* panel.addTool({
* type: 'gear',
* handler: function() {
* // ....
* }
* });
*
* panel.addTool([{
* type: 'gear',
* handler: 'viewControllerGearMethod'
* }, {
* type: 'save',
* handler: 'viewControllerSaveMethod'
* }]);
*
* By default the tools will be accessible via keyboard, with the exception of
* automatically added collapse/expand and close tools.
*
* If you implement keyboard equivalents of your tools' actions elsewhere and do not
* want the tools to participate in keyboard navigation, you can make them
* presentational instead:
*
* panel.addTool({
* type: 'mytool',
* focusable: false,
* ariaRole: 'presentation'
* // ...
* });
*
* @param {Object/Object[]/Ext.panel.Tool/Ext.panel.Tool[]} tools The tool or tools to
* add.
*/
addTool: function(tools) {
if (!Ext.isArray(tools)) {
tools = [tools];
}
// eslint-disable-next-line vars-on-top
var me = this,
header = me.header,
len = tools.length,
curTools = me.tools,
t, tool;
if (!header || !header.isHeader) {
header = null;
if (!curTools) {
me.tools = curTools = [];
}
}
for (t = 0; t < len; t++) {
tool = tools[t];
if (typeof tool !== 'string' && !tool.isTool) {
tool = Ext.apply({}, tool);
}
tool.toolOwner = me;
if (header) {
header.addTool(tool);
}
else {
// only modify the tools array if the header isn't created,
// otherwise, defer to the header to manage
curTools.push(tool);
}
}
me.updateHeader();
},
/**
* @method
* @protected
* @template
* Template method to be implemented in subclasses to add their tools after
* the collapsible tool.
*/
addTools: Ext.emptyFn,
getClosable: function() {
return this.closable;
},
setClosable: function(closable) {
var me = this,
tab = me.tab;
closable = !!closable;
if (me.closable !== closable) {
me.closable = closable;
if (tab) {
tab.setClosable(closable);
}
}
},
setCollapsible: function(collapsible) {
var me = this,
current = me.collapsible,
collapseTool = me.collapseTool;
me.collapsible = collapsible;
if (collapsible && !current) {
me.updateCollapseTool();
collapseTool = me.collapseTool;
if (collapseTool) {
collapseTool.show();
}
}
else if (!collapsible && current) {
if (collapseTool) {
collapseTool.hide();
}
}
},
/**
* @method addUIClsToElement
* @inheritdoc
*/
addUIClsToElement: function(cls) {
var me = this,
result = me.callParent(arguments);
me.addBodyCls([Ext.baseCSSPrefix + cls, me.baseCls + '-body-' + cls, me.baseCls +
'-body-' + me.ui + '-' + cls]);
return result;
},
/**
* Invoked after the Panel is Collapsed.
*
* @param {Boolean} animated
*
* @template
* @protected
*/
afterCollapse: function(animated) {
var me = this,
ownerLayout = me.ownerLayout;
me.isCollapsingOrExpanding = 0;
me.updateCollapseTool();
// The x-animating-size class sets overflow:hidden so that overflowing
// content is clipped during animation.
if (animated) {
me.removeCls(Ext.baseCSSPrefix + 'animating-size');
}
if (ownerLayout) {
ownerLayout.afterCollapse(me, animated);
}
me.setHiddenDocked();
me.fireEvent('collapse', me);
},
/**
* Invoked after the Panel is Expanded.
*
* @param {Boolean} animated
*
* @template
* @protected
*/
afterExpand: function(animated) {
var me = this,
ownerLayout = me.ownerLayout;
me.isCollapsingOrExpanding = 0;
me.updateCollapseTool();
// The x-animating-size class sets overflow:hidden so that overflowing
// content is clipped during animation.
if (animated) {
me.removeCls(Ext.baseCSSPrefix + 'animating-size');
}
if (ownerLayout) {
ownerLayout.afterExpand(me, animated);
}
me.fireEvent('expand', me);
me.fireHierarchyEvent('expand');
},
doDestroy: function() {
var me = this;
if (me.slideOutTask) {
me.slideOutTask.cancel();
}
Ext.destroy(
me.placeholder,
me.ghostPanel,
me.dd,
me.accordionHeaderKeyNav,
me.accordionBodyKeyNav,
me.defaultButtonKeyNav
);
me.destroyDockedItems();
me.callParent();
},
beforeRender: function() {
var me = this,
wasCollapsed;
// Ensure the protoBody exists so that initOverflow gets right answer from getOverflowEl.
// If this Panel was applied to an existing element (such as being used as a Viewport)
// then it will not have been created.
me.getProtoBody();
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 the panel participates in a border layout it should have the ARIA role of 'region'.
// In that case we need to render a heading element even if the panel is configured
// not to have a header.
if (!(me.preventHeader || (me.header === false)) || me.isViewportBorderChild) {
me.updateHeader();
}
me.afterHeaderInit = true;
// If we are rendering collapsed, we still need to save and modify various configs
if (me.collapsed) {
if (me.isPlaceHolderCollapse()) {
if (!me.hidden) {
me.setHiddenState(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.
// Prevent the first collapse from firing
me.preventCollapseFire = true;
me.placeholderCollapse();
delete me.preventCollapseFire;
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
* Memento Factory method
* @param {String} name Name of the Memento (used as prefix for named Memento)
*/
getMemento: function(name) {
var me = this;
if (name && typeof name === 'string') {
name += 'Memento';
return me[name] || (me[name] = new Ext.util.Memento(me));
}
},
/**
* @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 laid 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.getMemento('collapse'),
sizeModel = me.getSizeModel(),
header = me.header,
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-existence) 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(me.restoreDimension(), 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() && header !== false) {
if (header === (reExpander = me.getReExpander())) {
header.collapseImmune = true;
header.getInherited().collapseImmune = true;
header.addClsWithUI(me.getHeaderCollapsedClasses(header));
// Ensure that the reExpander has the correct framing applied.
if (header.rendered) {
header.updateFrame();
}
}
else if (reExpander.el) {
// We're going to use a temporary reExpander: show it.
reExpander.el.show();
reExpander.hidden = false;
}
}
if (me.resizer) {
me.resizer.disable();
}
if (me.rendered) {
me.ariaEl.dom.setAttribute('aria-expanded', false);
// In accordion layout, panel body has the role of tabpanel
// and needs to be updated accordingly when the panel is collapsed
if (me.isAccordionPanel) {
me.body.dom.setAttribute('aria-hidden', true);
}
}
},
beginDrag: function() {
if (this.floatingDescendants) {
this.floatingDescendants.hide();
}
},
beginExpand: function() {
var me = this,
lastBox = me.lastBox,
collapseMemento = me.getMemento('collapse'),
restoreDimension = me.restoreDimension(),
header = me.header,
reExpander;
if (collapseMemento) {
collapseMemento.restore(['minHeight', 'minWidth', restoreDimension]);
if (lastBox) {
collapseMemento.restore(restoreDimension, true, lastBox, 'last.');
}
}
if (me.ownerCt) {
me.ownerCt.getLayout().beginExpand(me);
}
if (!me.isPlaceHolderCollapse() && header !== false) {
// If we have been using our Header as the reExpander then restore the Header
// to expanded UI
if (header === (reExpander = me.getReExpander())) {
delete header.collapseImmune;
delete header.getInherited().collapseImmune;
header.removeClsWithUI(me.getHeaderCollapsedClasses(header));
// Ensure that the reExpander has the correct framing applied.
if (header.rendered) {
header.expanding = true;
header.updateFrame();
delete header.expanding;
}
}
else {
// We've been using a temporary reExpander: hide it.
reExpander.hidden = true;
reExpander.el.hide();
}
}
if (me.resizer) {
me.resizer.enable();
}
if (me.rendered) {
me.ariaEl.dom.setAttribute('aria-expanded', true);
// In accordion layout, panel body has the role of tabpanel
// and needs to be updated accordingly when the panel is expanded
if (me.isAccordionPanel) {
me.body.dom.setAttribute('aria-hidden', false);
}
}
},
bridgeToolbars: function() {
var me = this,
docked = [],
minButtonWidth = me.minButtonWidth,
fbar, fbarDefaults, fbarIsButtons;
function initToolbar(toolbar, pos, useButtonAlign, disableFocusableContainer) {
if (Ext.isArray(toolbar)) {
toolbar = {
xtype: 'toolbar',
items: toolbar
};
}
else if (!toolbar.isComponent) {
// Incoming toolbar config can be a property on the prototype
toolbar = Ext.apply({}, toolbar);
}
if (!toolbar.xtype) {
toolbar.xtype = 'toolbar';
}
toolbar.dock = pos;
if (disableFocusableContainer) {
toolbar.focusableContainer = false;
}
// Legacy support for buttonAlign (only used by buttons/fbar)
if (useButtonAlign) {
toolbar.layout = Ext.apply({
// default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
pack: { left: 'start', center: 'center' }[me.buttonAlign] || 'end'
}, toolbar.layout);
}
return toolbar;
}
if (me.tbar) {
docked.push(initToolbar(me.tbar, 'top'));
me.tbar = null;
}
if (me.bbar) {
docked.push(initToolbar(me.bbar, 'bottom'));
me.bbar = null;
}
if (me.buttons) {
me.fbar = me.buttons;
me.buttons = null;
fbarIsButtons = true;
}
if (me.fbar) {
fbar = initToolbar(me.fbar, 'bottom', true, fbarIsButtons); // 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 || {},
// no xtype or a button instance
isButton = !config.xtype || config.isButton,
cls;
// Here we have an object config with an xtype, check if it's a button
// or a button subclass
if (!isButton) {
cls = Ext.ClassManager.getByAlias('widget.' + config.xtype);
if (cls) {
isButton = cls.prototype.isButton;
}
}
if (isButton && !('minWidth' in defaults)) {
defaults = Ext.apply({ minWidth: minButtonWidth }, defaults);
}
return defaults;
};
}
docked.push(fbar);
me.fbar = null;
}
if (me.lbar) {
docked.push(initToolbar(me.lbar, 'left'));
me.lbar = null;
}
if (me.rbar) {
docked.push(initToolbar(me.rbar, 'right'));
me.rbar = null;
}
if (me.dockedItems) {
if (me.dockedItems.isMixedCollection) {
me.addDocked(docked);
}
else {
if (!Ext.isArray(me.dockedItems)) {
me.dockedItems = [me.dockedItems];
}
me.dockedItems = me.dockedItems.concat(docked);
}
}
else {
me.dockedItems = docked;
}
},
/**
* 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();
}
},
/**
* 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
*
* Defaults to {@link #collapseDirection}.
*
* @param {Boolean/Number} [animate] True to animate the transition, else false
* (defaults to the value of the {@link #animCollapse} panel config). May
* also be specified as the animation duration in milliseconds.
* @return {Ext.panel.Panel} this
*/
collapse: function(direction, animate) {
var me = this,
collapseDir = direction || me.collapseDirection,
ownerCt = me.ownerCt,
layout = me.ownerLayout,
rendered = me.rendered;
// https://sencha.jira.com/browse/EXTJS-26862
// https://sencha.jira.com/browse/EXTJS-29572
// Set the focus to the collapse tool to ensure any currently
// focused components do not remain on screen after collapse
if (me.containsFocus && me.collapseTool) {
me.collapseTool.focus();
}
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 (layout && layout.onBeforeComponentCollapse) {
if (layout.onBeforeComponentCollapse(me) === false) {
return me;
}
}
if (rendered && ownerCt && me.isPlaceHolderCollapse()) {
return me.placeholderCollapse(direction, animate);
}
me.collapsed = collapseDir;
if (rendered) {
me.beginCollapse();
}
me.getInherited().collapsed = true;
me.fireHierarchyEvent('collapse');
if (rendered) {
me.doCollapseExpand(1, animate);
}
return me;
},
collapsedHorizontal: function() {
var dir = this.getCollapsed();
return dir === 'left' || dir === 'right';
},
collapsedVertical: function() {
var dir = this.getCollapsed();
return dir === 'top' || dir === 'bottom';
},
/**
* converts a collapsdDir into an anchor argument for Element.slideIn
* overridden in rtl mode to switch "l" and "r"
*/
convertCollapseDir: function(collapseDir) {
return collapseDir.substr(0, 1);
},
createGhost: function(cls) {
var me = this,
header = me.header,
frame = me.frame && !me.alwaysFramed;
return {
xtype: 'panel',
hidden: false,
header: header ? { titleAlign: header.getTitleAlign() } : null,
ui: frame ? me.ui.replace(/-framed$/, '') : me.ui,
id: me.id + '-ghost',
renderTo: Ext.getBody(),
// The ghost's opacity causes the resize handles to obscure the frame in
// IE, so always force resizable to be false.
resizable: false,
// The ghost must not be draggable (the actual class instantiated
// may be draggable in its prototype)
draggable: false,
// Tools are explicitly copied.
closable: false,
focusable: false,
floating: true,
alignOnScroll: false,
shadow: false,
frame: frame,
shim: me.shim,
alwaysFramed: me.alwaysFramed,
overlapHeader: me.overlapHeader,
headerPosition: me.getHeaderPosition(),
titleRotation: me.getTitleRotation(),
baseCls: me.baseCls,
getRefOwner: function() {
return me.getRefOwner();
},
cls: me.baseCls + '-ghost ' + (cls || '')
};
},
createReExpander: function(direction, defaults) {
var me = this,
isLeft = direction === 'left',
isRight = direction === 'right',
isVertical = isLeft || isRight,
ownerCt = me.ownerCt,
header = me.header,
result = Ext.apply({
hideMode: 'offsets',
title: me.getTitle(),
titleAlign: me.getTitleAlign(),
titlePosition: me.getTitlePosition(),
vertical: isVertical,
textCls: me.headerTextCls,
icon: me.getIcon(),
iconCls: me.getIconCls(),
iconAlign: me.getIconAlign(),
glyph: me.getGlyph(),
baseCls: me.self.prototype.baseCls + '-header',
ui: me.ui,
frame: me.frame && me.frameHeader,
ignoreParentFrame: me.frame || me.overlapHeader,
ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
indicateDrag: me.draggable,
collapseImmune: true,
ariaRole: me.ariaRole,
preventRefocus: true,
ownerCt: (ownerCt && me.collapseMode === 'placeholder') ? ownerCt : me,
ownerLayout: me.componentLayout,
forceOrientation: true,
margin: me.margin,
// When placeholder is focused, focus the expander tool.
// TODO: When https://sencha.jira.com/browse/EXTJS-19718 is
// fixed, this should not be needed.
// placeholder is a FocusableContainer
defaultFocus: 'tool[isDefaultExpandTool]'
}, 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;
}
}
if (header) {
Ext.apply(result, {
focusableContainer: header.focusableContainer,
activeChildTabIndex: header.activeChildTabIndex,
inactiveChildTabIndex: header.inactiveChildTabIndex,
allowFocusingDisabledChildren: header.allowFocusingDisabledChildren
});
}
// 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 (!me.maintainTitlePosition && (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.tools = [{
xtype: 'tool',
type: 'expand-' + me.getOppositeDirection(direction),
isDefaultExpandTool: true,
uiCls: ['top'],
handler: me.toggleCollapse,
scope: me,
tooltip: me.expandToolText
}];
}
result = new Ext.panel.Header(result);
result.addClsWithUI(me.getHeaderCollapsedClasses(result));
result.expandTool = result.down('tool[isDefaultExpandTool=true]');
return result;
},
/**
* @private
*/
doClose: function() {
this.fireEvent('close', this);
this[this.closeAction]();
},
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 layout ContextItem to impose an animation policy based upon the
// collapse direction and the animCollapse setting.
me.isCollapsingOrExpanding = flags;
// The x-animating-size class sets overflow:hidden so that overflowing
// content is clipped during animation.
if (animate) {
me.addCls(Ext.baseCSSPrefix + 'animating-size');
}
if (ownerLayout && !animate) {
ownerLayout.onContentChange(me);
}
else {
me.updateLayout({ isRoot: true });
}
// set animCollapse back to its original value
me.animCollapse = originalAnimCollapse;
return me;
},
endDrag: function() {
if (this.floatingDescendants) {
this.floatingDescendants.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). May
* also be specified as the animation duration in milliseconds.
* @return {Ext.panel.Panel} this
*/
expand: function(animate) {
var me = this,
layout = me.ownerLayout,
rendered = me.rendered;
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 (layout && layout.onBeforeComponentExpand) {
if (layout.onBeforeComponentExpand(me) === false) {
return me;
}
}
delete me.getInherited().collapsed;
if (rendered && me.isPlaceHolderCollapse()) {
return me.placeholderExpand(animate);
}
me.restoreHiddenDocked();
if (rendered) {
me.beginExpand();
}
me.collapsed = false;
if (me.rendered) {
me.doCollapseExpand(2, animate);
}
return me;
},
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 vertical 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 new Error('Panel#findReExpander must be passed a valid collapseDirection');
}
},
floatCollapsedPanel: function() {
var me = this,
placeholder = me.placeholder,
splitter = me.splitter,
phBox = Ext.util.Region.from(placeholder.getBox(false, true)),
floatCls = Ext.panel.Panel.floatCls,
collapsed = me.collapsed,
layoutOwner = me.ownerCt || me,
slideDirection, myBox,
hoverlisteners = {
mouseleave: me.onMouseLeaveFloated,
mouseenter: me.onMouseEnterFloated,
scope: me,
destroyable: true
};
if (me.isSliding) {
return;
}
// Already floated
if (me.el.hasCls(floatCls)) {
me.slideOutFloatedPanel();
return;
}
me.isSliding = true;
// Lay out in fully expanded mode to ensure we are at the correct size,
// and collect our expanded box
placeholder.el.hide();
placeholder.hidden = true;
me.el.show();
me.setHiddenState(false);
me.collapsed = false;
layoutOwner.updateLayout();
// Then go back immediately to collapsed state from which to initiate the float into view.
placeholder.el.show();
placeholder.hidden = false;
me.el.hide();
me.setHiddenState(true);
me.collapsed = collapsed;
layoutOwner.updateLayout();
myBox = me.getBox(false, true);
if (me.fireEvent('beginfloat', me) === false) {
return;
}
me.slideOutTask = me.slideOutTask || new Ext.util.DelayedTask(me.slideOutFloatedPanel, me);
// Tap/mousedown/mousemove outside the floated element, its placeholder,
// or its splitter slides it back.
me.pointerLeaveListener = Ext.getDoc().on({
mousedown: me.onFloatedPointerEvent,
mousemove: me.onFloatedPointerEvent,
scope: me,
destroyable: true
});
if (!me.placeholderListener) {
me.placeholderListener = placeholder.on({
resize: me.onPlaceholderResize,
scope: me,
destroyable: true
});
}
me.phHoverListeners = placeholder.el.on(hoverlisteners);
me.elHoverListeners = me.el.on(hoverlisteners);
me.el.addCls(floatCls);
me.floated = collapsed;
// Hide collapse tool in header if there is one (we might be headerless)
if (me.collapseTool) {
me.collapseTool.el.hide();
}
if (splitter) {
phBox = phBox.union(splitter.getBox(false, true));
}
switch (me.collapsed) {
case 'top':
me.width = phBox.width;
me.setLocalXY(myBox.x, myBox.y + phBox.height);
break;
case 'right':
me.height = phBox.height;
me.setLocalXY(myBox.x - phBox.width, myBox.y);
break;
case 'bottom':
me.width = phBox.width;
me.setLocalXY(myBox.x, myBox.y - phBox.height);
break;
case 'left':
me.height = phBox.height;
me.setLocalXY(myBox.x + phBox.width, myBox.y);
break;
}
slideDirection = me.convertCollapseDir(me.collapsed);
// 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 = false;
me.setHiddenState(false);
me.el.slideIn(slideDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.isSliding = false;
me.fireEvent('endfloat', me);
me.fireEvent('float', me);
}
}
});
},
onFloatedPointerEvent: function(event) {
var me = this;
// If any pointer event occurs inside the component tree, cancel any slideOut.
// This includes if we are slid out and the pointer is inside the region
// because locked grids have pointer-events: none to allow interaction with
// the Y scroller below them.
if (me.owns(event) || me.placeholder.owns(event) ||
(me.splitter && me.splitter.owns(event)) ||
(me.floatCollapsedPanel && me.el.getRegion().contains(event.getPoint()))) {
me.slideOutTask.cancel();
}
// Mousemove outside, or tap outside, schedule a slideOut unless they change their minds and
// tap/mousemove back inside within 500ms
else {
me.slideOutTask.delay(500);
}
},
onMouseEnterFloated: function(e) {
this.slideOutTask.cancel();
},
onMouseLeaveFloated: function(e) {
var toElement = e.getRelatedTarget();
// If the toElement is in the component tree, do not collapse
if (toElement && (this.owns(toElement) || this.placeholder.owns(toElement))) {
return;
}
this.slideOutTask.delay(500);
},
onPlaceholderResize: function(ph, newWidth, newHeight) {
var me = this,
splitter = me.splitter,
myBox = me.getBox(false, true),
phBox = Ext.util.Region.from(ph.getBox(false, true));
if (splitter) {
phBox = phBox.union(splitter.getBox(false, true));
}
// Position floated panel alongside the placeholder, and sync the parallel dimension
switch (me.floated) {
case 'top':
me.width = newWidth;
me.setLocalY(phBox.y + phBox.height);
break;
case 'right':
me.height = newHeight;
me.setLocalX(phBox.x - myBox.width);
break;
case 'bottom':
me.width = newWidth;
me.setLocalY(phBox.y - myBox.height);
break;
case 'left':
me.height = newHeight;
me.setLocalX(phBox.x + phBox.width);
break;
}
me.updateLayout({
isRoot: true
});
},
getAnimationProps: function() {
var me = this,
props;
props = me.callParent();
if (typeof me.animCollapseDuration === 'number') {
props.duration = me.animCollapseDuration;
}
else if (typeof me.animCollapse === 'number') {
props.duration = me.animCollapse;
}
return props;
},
/**
* Returns the current collapsed state of the panel.
* @return {Boolean/String} False when not collapsed, otherwise the value of
* {@link #collapseDirection}.
*/
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;
},
getCollapsedDockedItems: function() {
var me = this;
return me.header === false ||
(me.collapseMode === 'placeholder' ? me.emptyArray : [me.getReExpander()]);
},
/**
* Attempts a default component lookup (see {@link Ext.container.Container#getComponent}).
* If the component is not found in the normal items, the dockedItems are searched
* and the matched component (if any) returned (see {@link #getDockedComponent}).
* Note that docked items will only be matched by component id or itemId -- if you pass
* a numeric index only non-docked child components will be searched.
* @param {String/Number} comp The component id, itemId or position to find
* @return {Ext.Component} The component (if found)
* @since 2.3.0
*/
getComponent: function(comp) {
var component = this.callParent(arguments);
if (component === undefined && !Ext.isNumber(comp)) {
// If the arg is a numeric index skip docked items
component = this.getDockedComponent(comp);
}
return component;
},
/**
* Gets the {@link Ext.panel.Header Header} for this panel.
* @return {Ext.panel.Header}
*/
getHeader: function() {
return this.header;
},
/**
* @private
* Create the class array to add to the Header when collapsed.
*/
getHeaderCollapsedClasses: function(header) {
var me = this,
collapsedCls = me.collapsedCls,
collapsedClasses;
collapsedClasses = [ collapsedCls, collapsedCls + '-' + header.getDockName()];
if (me.border && (!me.frame || (me.frame && Ext.supports.CSS3BorderRadius))) {
collapsedClasses.push(collapsedCls + '-border-' + header.getDockName());
}
return collapsedClasses;
},
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;
}
},
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
click: {
// titleCollapse needs to take precedence over floatable
fn: function(e, target) {
var expandTool = placeholder.expandTool;
// If the element click was specifically on the tool,
// that tool's handler will process it and we must not:
// https://sencha.jira.com/browse/EXTJS-21045
if (!(expandTool && expandTool.el.dom.contains(arguments[1]))) {
// eslint-disable-next-line max-len
me[(!titleCollapse && floatable) ? 'floatCollapsedPanel' : '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, {
margin: me.margin,
placeholderFor: me,
synthetic: true // not user-defined
});
placeholder.addCls([
Ext.baseCSSPrefix + 'region-collapsed-placeholder',
Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder',
me.collapsedCls
]);
}
return placeholder;
},
getProtoBody: function() {
var me = this,
body = me.protoBody;
if (!body) {
me.protoBody = body = new Ext.util.ProtoElement({
cls: me.bodyCls,
style: me.bodyStyle,
clsProp: 'bodyCls',
styleProp: 'bodyStyle',
styleIsText: true
});
}
return body;
},
getReExpander: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
reExpander = me.reExpander || me.findReExpander(collapseDir),
titleCollapse = me.titleCollapse,
listeners = null;
me.expandDirection = me.getOppositeDirection(collapseDir);
if (!reExpander) {
if (titleCollapse) {
listeners = {
click: {
fn: me.toggleCollapse,
element: 'el',
scope: me
}
};
}
// 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',
isCollapsedExpander: true,
listeners: listeners
});
me.dockedItems.insert(0, reExpander);
}
return reExpander;
},
getRefItems: function(deep) {
var placeholder = this.placeholder,
result;
// Collapsed placeholder must be queryable if it is a Container.
// The placeholder can be objects/ Ext.Component and thus check
// is required before it is further processed as a component
if (placeholder && placeholder.isComponent) {
result = [placeholder];
if (deep && placeholder.getRefItems) {
result.push.apply(result, placeholder.getRefItems(deep));
}
}
else {
result = [];
}
// And the rest.
result.push.apply(result, this.getDockingRefItems(deep, this.callParent([deep])));
return result;
},
getState: function() {
var me = this,
state = me.callParent() || {},
collapsed = me.collapsed,
floated = me.floated,
memento, placeholder;
// When taking state to restore on a page refresh, floated means collapsed
if (floated) {
me.collapsed = floated;
}
state = me.addPropertyToState(state, 'collapsed');
if (floated) {
me.collapsed = collapsed;
}
// If a collapse has taken place, use remembered values as the dimensions.
if (me.getCollapsed()) {
memento = me.getMemento('collapse').data;
state = me.addPropertyToState(state, 'collapsed', memento);
placeholder = me.isPlaceHolderCollapse();
if (me.collapsedVertical()) {
if (placeholder) {
state = me.addPropertyToState(state, 'height');
delete state.width;
}
else {
delete state.height;
if (memento) {
state = me.addPropertyToState(state, 'height', memento.height);
}
}
}
else {
if (placeholder) {
state = me.addPropertyToState(state, 'width');
delete state.height;
}
else {
delete state.width;
if (memento) {
state = me.addPropertyToState(state, 'width', memento.width);
}
}
}
}
return state;
},
applyState: function(state) {
var me = this,
collapseMemento = {},
collapsed;
if (state) {
collapsed = state.collapsed;
if (collapsed) {
collapseMemento = me.getMemento('collapse');
Ext.Object.merge(collapseMemento.data, collapsed);
state.collapsed = true;
}
me.callParent([state]);
}
},
/**
* @private
* Used for dragging.
*/
ghost: function(cls) {
var me = this,
myEl = me.el,
ghostPanel = me.ghostPanel,
box = me.getBox(),
header = me.header,
ghostHeader, tools, icon, iconCls, glyph, i;
Ext.suspendLayouts();
if (!ghostPanel) {
me.ghostPanel = ghostPanel = Ext.widget(me.createGhost(cls));
ghostPanel.el.dom.removeAttribute('tabIndex');
}
else {
ghostPanel.el.show();
}
// Important to do this before the setSize call otherwise it won't
// stamp the sizes onto the element.
ghostPanel.setHiddenState(false);
ghostPanel.setXY([box.x, box.y]);
ghostPanel.setSize(box.width, box.height);
ghostPanel.floatParent = me.floatParent;
// Only churn ghost's header if our header has changed composition
if (header && !me.preventHeader && me.lastHeaderGen !== header.items.generation) {
ghostHeader = ghostPanel.header;
// restore options
tools = ghostHeader.query('tool');
for (i = tools.length; i--;) {
ghostHeader.remove(tools[i]);
}
// reset the title position to ensure that the title gets moved into the correct
// place after we add the tools (if the position didn't change the updater won't run)
ghostHeader.setTitlePosition(0);
ghostPanel.addTool(me.ghostTools());
ghostPanel.setTitle(me.getTitle());
ghostHeader.setTitlePosition(header.getTitlePosition());
ghostHeader.setIconAlign(header.getIconAlign());
ghostHeader.setTitleAlign(header.getTitleAlign());
iconCls = me.getIconCls();
if (iconCls) {
ghostPanel.setIconCls(iconCls);
}
else {
icon = me.getIcon();
if (icon) {
ghostPanel.setIcon(icon);
}
else {
glyph = me.getGlyph();
if (glyph) {
ghostPanel.setGlyph(glyph);
}
}
}
ghostHeader.addCls(Ext.baseCSSPrefix + 'header-ghost');
me.lastHeaderGen = header.items.generation;
}
Ext.resumeLayouts(true);
// Hide element, but do not disturb focus or clobber accessibility
me.elVisMode = myEl.getVisibilityMode();
myEl.setVisibilityMode(Ext.Element.CLIP);
myEl.hide();
return ghostPanel;
},
/**
* @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,
focusable: false
});
}
}
else {
tools = [{
type: 'placeholder'
}];
}
return tools;
},
initBodyBorder: function() {
var me = this;
if (me.frame && me.bodyBorder) {
if (!Ext.isNumber(me.bodyBorder)) {
me.bodyBorder = 1;
}
me.getProtoBody().setStyle('border-width', this.unitizeBox(me.bodyBorder));
}
},
/**
* Parses the {@link #bodyStyle} config if available to create a style string
* that will be applied to the body element.
* This also includes {@link #bodyPadding} and {@link #bodyBorder} if available.
* @return {String} A CSS style string with body styles, padding and border.
* @private
*/
initBodyStyles: function() {
var me = this,
body = me.getProtoBody();
if (me.bodyPadding !== undefined) {
if (me.layout.managePadding) {
// If the container layout manages padding, the layout will apply the
// padding to an inner element rather than the body element. The
// assumed intent is for the configured padding to override any padding
// that is applied to the body element via style sheet rules. It is
// therefore necessary to set the body element's padding to "0".
body.setStyle('padding', 0);
}
else {
body.setStyle(
'padding', this.unitizeBox((me.bodyPadding === true) ? 5 : me.bodyPadding)
);
}
}
me.initBodyBorder();
},
initBorderProps: function() {
var me = this;
if (me.frame && me.border && me.bodyBorder === undefined) {
me.bodyBorder = false;
}
if (me.frame && me.border && (me.bodyBorder === false || me.bodyBorder === 0)) {
me.manageBodyBorders = true;
}
},
initComponent: function() {
var me = this;
if (me.collapsible) {
// Save state on these two events.
me.addStateEvents(['expand', 'collapse']);
}
if (me.unstyled) {
me.setUI('plain');
}
if (me.frame) {
me.setUI(me.ui + '-framed');
}
// Backwards compatibility
me.bridgeToolbars();
me.initBorderProps();
me.callParent();
me.collapseDirection = me.collapseDirection || me.getHeaderPosition() ||
Ext.Component.DIRECTION_TOP;
// Certain layouts will reset animCollapse to false but we'd like to preserve
// the duration to use with animations, if it was configured
if (typeof me.animCollapse === 'number') {
me.animCollapseDuration = me.animCollapse;
}
// Used to track hidden content elements during collapsed state
me.hiddenOnCollapse = new Ext.dom.CompositeElement();
},
initItems: function() {
this.callParent();
this.initDockingItems();
},
/**
* Initialized the renderData to be used when rendering the renderTpl.
* @return {Object} Object with keys and values that are going to be applied to the renderTpl
* @private
*/
initRenderData: function() {
var me = this,
bodyWrapRole = me.bodyWrapAriaRole,
bodyRole = me.bodyAriaRole,
data;
data = me.callParent();
me.initBodyStyles();
me.protoBody.writeTo(data);
delete me.protoBody;
if (me.headingText) {
data.headingText = me.headingText;
me.addChildEl('headingEl');
}
if (bodyWrapRole) {
data.bodyWrapAriaAttributes = {
role: bodyWrapRole
};
if (!me.ariaStaticRoles[bodyWrapRole] && me.bodyWrapAriaRenderAttributes) {
Ext.apply(data.bodyWrapAriaAttributes, me.bodyWrapAriaRenderAttributes);
}
}
if (bodyRole) {
data.bodyAriaAttributes = {
role: bodyRole
};
if (!me.ariaStaticRoles[bodyRole] && me.bodyAriaRenderAttributes) {
Ext.apply(data.bodyAriaAttributes, me.bodyAriaRenderAttributes);
}
}
return data;
},
/**
* @private
* Override of Positionable method to calculate constrained position based upon possibly only
* constraining our header.
*/
calculateConstrainedPosition: function(constrainTo, proposedPosition, local, proposedSize) {
var me = this,
header = me.header,
lastBox, fp;
// If we are only constraining the header, ask the header for its constrained position
// based upon the size the header will take on based upon this panel's proposedSize
if (me.constrainHeader) {
lastBox = header.lastBox;
if (proposedSize) {
if (!header.vertical) {
proposedSize = [proposedSize[0], lastBox ? lastBox.height : proposedSize[1]];
}
else {
proposedSize = [lastBox ? lastBox.width : proposedSize[0], proposedSize[1]];
}
}
else if (lastBox) {
proposedSize = [lastBox.width, lastBox.height];
}
fp = me.floatParent;
constrainTo = constrainTo || me.constrainTo || (fp ? fp.getTargetEl() : null) ||
me.container || me.el.parent();
}
return me.callParent([constrainTo, proposedPosition, local, proposedSize]);
},
/**
* @private
* Tools are a Panel-specific capability.
* Panel uses initTools. Subclasses may contribute tools by implementing addTools.
*/
initTools: function() {
var me = this,
tools = me.tools,
len = tools && tools.length,
i, toolCfg, tool;
me.tools = [];
if (len) {
for (i = 0; i < len; ++i) {
tool = tools[i];
if (typeof tool !== 'string' && !tool.isTool) {
tool = Ext.apply({}, tool);
}
me.tools.push(tool);
tool.toolOwner = me;
}
}
// 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.updateCollapseTool();
// Prepend collapse tool is configured to do so.
if (me.collapseFirst) {
me.tools.unshift(me.collapseTool);
}
}
// Add subclass-specific tools.
me.addTools();
if (me.pinnable) {
me.initPinnable();
}
// Make Panel closable.
if (me.closable) {
me.addClsWithUI('closable');
toolCfg = {
xtype: 'tool',
type: 'close',
scope: me,
handler: me.close,
tooltip: me.closeToolText
};
// Same as with the collapse/expand tool, we have a way to close
// the panel via keyboard by pressing Alt-Del key when panel's
// title is focused; hence we do not need to have the close tool
// in the tab order. We still need to have the tool itself for
// pointer interaction and presentational purposes.
// This configuration will make sure the tool is working as it was
// in Ext JS older than 6.0.
if (me.isAccordionPanel || me.disableCloseToolFocus) {
toolCfg.focusable = false;
toolCfg.ariaRole = 'presentation';
}
me.addTool(toolCfg);
}
// Append collapse tool if needed.
if (me.collapseTool && !me.collapseFirst) {
me.addTool(me.collapseTool);
}
},
isLayoutRoot: function() {
if (this.floatedFromCollapse) {
return true;
}
return this.callParent();
},
isPlaceHolderCollapse: function() {
return this.collapseMode === 'placeholder';
},
isVisible: function(deep) {
var me = this;
if (me.collapsed && me.placeholder) {
return me.placeholder.isVisible(deep);
}
return me.callParent(arguments);
},
onBoxReady: function() {
var me = this,
target;
me.callParent(arguments);
if (me.collapsed) {
me.setHiddenDocked();
}
if (me.isAccordionPanel) {
// ARIA state like expanded/collapsed are reflected
// on the panel header's title component.
me.ariaEl = me.header.titleCmp.el;
me.ariaEl.dom.setAttribute('aria-expanded', !me.collapsed);
me.ariaEl.dom.setAttribute('aria-controls', me.body.id);
// Body element has the role="tabpanel"; when the panel is collapsed
// or expanded we will update ARIA attributes on the body.
me.body.dom.setAttribute('aria-labelledby', me.header.titleCmp.id);
me.body.dom.setAttribute('aria-hidden', !!me.collapsed);
me.accordionHeaderKeyNav = new Ext.util.KeyNav({
target: me.header.titleCmp.el,
scope: me,
left: me.navigateAccordionHeader,
right: me.navigateAccordionHeader,
up: me.navigateAccordionHeader,
down: me.navigateAccordionHeader,
home: me.navigateAccordionHeader,
end: me.navigateAccordionHeader,
space: me.toggleCollapse,
enter: me.toggleCollapse,
del: {
alt: true,
fn: me.maybeClose
}
});
me.accordionBodyKeyNav = new Ext.util.KeyNav({
target: me.bodyWrap,
scope: me,
up: {
ctrl: true,
fn: me.navigateAccordionBody
}
});
}
if (me.defaultButton) {
target = me.defaultButtonTarget ? me[me.defaultButtonTarget] : me.body;
me.defaultButtonKeyNav = new Ext.util.KeyNav({
target: target,
scope: me,
defaultEventAction: 'stopEvent',
enter: me.fireDefaultButton
});
}
},
onHide: function(animateTarget, cb, scope) {
var me = this,
dd = me.dd;
// If floated out from collapse, hide the el immediately.
// We continue with the hide from a collapsed state.
if (me.floatedFromCollapse) {
me.slideOutFloatedPanel(true);
}
if (me.draggable && dd) {
// Panels w/o headers won't have a Component Dragger.
dd.endDrag();
}
if (me.collapsed && me.placeholder) {
if (me.splitter) {
Ext.suspendLayouts();
me.splitter.hide();
Ext.resumeLayouts();
}
me.placeholder.hide();
}
else {
me.callParent([animateTarget, cb, scope]);
}
},
/**
* @method onRemoved
* @inheritdoc
*/
onRemoved: function(destroying) {
var me = this;
// 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.
// Must run before callParent because that breaks the ownerCt link
if (me.placeholder && !destroying) {
me.ownerCt.remove(me.placeholder, false);
}
me.callParent(arguments);
},
onShow: function() {
var me = this;
if (me.collapsed && me.isPlaceHolderCollapse()) {
if (me.splitter) {
Ext.suspendLayouts();
me.splitter.show();
Ext.resumeLayouts();
}
// force hidden back to true, since this gets set by the layout
me.setHiddenState(true);
me.placeholderCollapse();
}
else {
me.callParent(arguments);
}
},
placeholderCollapse: function(direction, animate) {
var me = this,
ownerCt = me.ownerCt,
collapseDir = direction || me.collapseDirection,
floatCls = Ext.panel.Panel.floatCls,
collapseTool = me.collapseTool,
placeholder = me.getPlaceholder(collapseDir),
slideInDirection;
if (Ext.Component.layoutSuspendCount || me.isLayoutSuspended()) {
animate = false;
}
me.fireEvent('beginfloat', me);
me.isCollapsingOrExpanding = 1;
// Upcoming layout run will ignore this Component
me.setHiddenState(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.setHiddenState(false);
placeholder.el.show();
ownerCt.updateLayout();
}
else {
ownerCt.insert(ownerCt.items.indexOf(me), placeholder);
}
if (me.rendered) {
// The doPlaceholderCollapse callback must not make assumptions about where
// to restore focus to. We decide that here.
me.focusPlaceholderExpandTool = me.focusPlaceHolder = false;
// We assume that if collapse was caused by keyboard action
// on focused collapse tool, the logical focus transition
// is to placeholder's expand tool. Note that it may not be
// the case when the user *clicked* collapse tool while focus
// was elsewhere; in that case we dare not touch focus
// to avoid sudden jumps.
if (collapseTool && Ext.ComponentManager.getActiveComponent() === collapseTool) {
me.focusPlaceholderExpandTool = true;
}
// If the focus was otherwise owned by us, just focus the placeholder
else if (me.containsFocus) {
me.focusPlaceHolder = true;
}
// 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();
slideInDirection = me.convertCollapseDir(collapseDir);
me.el.slideOut(slideInDirection, {
preserveScroll: true,
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
scope: me,
afteranimate: function() {
var me = this,
placeholderEl = me.placeholder.el;
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.
*
* Also note that presently there is no way to abort slideIn
* animation sequence so this callback will be fired even if
* the panel was removed while collapsing.
* In that case we must not set "display: none" on the placeholder
* because fixDisplay() will not reset it and that will break
* subsequent layouts if the panel is re-added back to the owner
* container again.
*/
placeholderEl.show();
if (me.ownerCt) {
placeholderEl.setStyle('display', 'none');
placeholderEl.slideIn(slideInDirection, {
easing: 'linear',
duration: 100,
listeners: {
afteranimate: me.doPlaceholderCollapse,
scope: me
}
});
}
else {
me.doPlaceholderCollapse();
}
}
}
});
}
else {
me.el.hide();
me.doPlaceholderCollapse();
}
}
else {
me.isCollapsingOrExpanding = 0;
if (!me.preventCollapseFire) {
me.fireEvent('collapse', me);
}
}
return me;
},
doPlaceholderCollapse: function() {
var me = this,
placeholder = me.placeholder,
expandTool = placeholder.expandTool,
dom;
// See the comment in placeholderCollapse().
if (me.focusPlaceholderExpandTool && expandTool) {
expandTool.focus();
}
// However when focus was *not* on the collapse tool,
// and we contained focus, we still need to try and
// focus the placeholder itself since it may have been
// configured with something focusable inside, and delegate focus handling.
else if (me.focusPlaceHolder) {
placeholder.focus();
}
me.focusPlaceholderExpandTool = false;
placeholder.setHiddenState(false);
// Both panel *and* placeholder are collapsed,
// but only panel is hidden. Calling setHiddenState()
// above does not reset aria-hidden attribute.
if (placeholder.rendered) {
dom = placeholder.ariaEl.dom;
dom.setAttribute('aria-hidden', false);
dom.setAttribute('aria-expanded', false);
}
dom = me.ariaEl.dom;
dom.setAttribute('aria-hidden', true);
dom.setAttribute('aria-expanded', false);
me.isCollapsingOrExpanding = 0;
me.fireEvent('collapse', me);
me.fireEvent('endfloat', me);
},
placeholderExpand: function(animate) {
var me = this,
collapseDir = me.collapsed,
expandTool = me.placeholder.expandTool,
floatCls = Ext.panel.Panel.floatCls,
center = me.ownerLayout ? me.ownerLayout.centerRegion : null,
finalPos, floatedPos;
// Layouts suspended - don't bother with animation shenanigans
if (Ext.Component.layoutSuspendCount) {
animate = false;
}
if (me.floatedFromCollapse) {
floatedPos = me.getPosition(true);
// these are the same cleanups performed by the normal slideOut mechanism:
me.slideOutFloatedPanelBegin();
me.slideOutFloatedPanelEnd();
me.floated = false;
}
// We assume that if expand was caused by keyboard action on focused
// placeholder expand tool, the logical focus transition is to the
// panel header's collapse tool.
// Note that it may not be the case when the user *clicked* expand tool
// while focus was elsewhere; in that case we dare not touch focus to avoid
// sudden jumps.
if (expandTool && Ext.ComponentManager.getActiveComponent() === expandTool) {
me.focusHeaderCollapseTool = true;
// There is an odd issue with JAWS screen reader: when expanding a panel,
// it will announce Expand tool again before focus is forced to Collapse
// tool. I'm not sure why that happens since focus does not move from
// Expand tool during animation; this hack should work around
// the problem until we come up with more understanding and a proper
// solution. The attributes are restored below in doPlaceholderExpand.
expandTool._ariaRole = expandTool.ariaEl.dom.getAttribute('role');
expandTool._ariaLabel = expandTool.ariaEl.dom.getAttribute('aria-label');
expandTool.ariaEl.dom.setAttribute('role', 'presentation');
expandTool.ariaEl.dom.removeAttribute('aria-label');
}
if (animate) {
// Expand me and hide the placeholder
Ext.suspendLayouts();
me.placeholder.hide();
me.el.show();
me.collapsed = false;
me.setHiddenState(false);
// Stop the center region from moving when laid out without the placeholder there.
// Unless we are expanding from a floated out situation. In that case,
// it's laid out immediately.
if (center && !floatedPos) {
center.hidden = true;
}
Ext.resumeLayouts(true);
if (center) {
center.hidden = false;
}
if (!me.floatedFromCollapse) {
me.fireEvent('beginfloat', me);
}
me.el.addCls(floatCls);
// At this point, this Panel is arranged in its correct, expanded layout.
// The center region has not been affected because it has been flagged as hidden.
//
// If we are proceeding from floated, the center region has also been arranged
// in its new layout to accommodate this expansion, so no further layout is needed, just
// element animation.
//
// If we are proceeding from fully collapsed, the center region has *not* been relayed
// out because the UI look and feel dictates that it stays stable until the expanding
// panel has slid in all the way, and *then* it snaps into place.
me.isCollapsingOrExpanding = 2;
// Floated, move it back to the floated pos, and thence into the correct place
if (floatedPos) {
finalPos = me.getXY();
me.setLocalXY(floatedPos[0], floatedPos[1]);
me.setXY([finalPos[0], finalPos[1]], {
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
scope: me,
afteranimate: function() {
var me = this;
me.el.removeCls(floatCls);
me.isCollapsingOrExpanding = 0;
me.fireEvent('expand', me);
me.fireEvent('endfloat', me);
}
}
});
}
// Not floated, slide it in to the correct place
else {
me.el.hide();
me.placeholder.el.show();
me.placeholder.hidden = false;
// Slide this Component's el back into place, after which we lay out AGAIN
me.setHiddenState(false);
me.el.slideIn(me.convertCollapseDir(collapseDir), {
preserveScroll: true,
duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: me.doPlaceholderExpand,
scope: me
}
});
}
}
else {
me.floated = me.collapsed = false;
me.doPlaceholderExpand(true);
}
return me;
},
doPlaceholderExpand: function(nonAnimated) {
var me = this,
placeholder = me.placeholder,
collapseTool = me.collapseTool,
expandTool = placeholder.expandTool;
nonAnimated = nonAnimated === true;
if (nonAnimated) {
Ext.suspendLayouts();
me.show();
}
// 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(Ext.panel.Panel.floatCls);
placeholder.hide();
if (nonAnimated) {
Ext.resumeLayouts(true);
}
else {
// The center region has been left in its larger size, so a layout is needed now
me.updateLayout();
}
// This part is quite tricky in both animated and non-animated sequence.
// After the panel is collapsed we will show the placeholder,
// but by that time we had already lost the previous focus state.
// The subsequent onFocusEnter on the placeholder will thusly reset
// placeholder's previousFocus property to null; so when we hide
// the placeholder after expanding the panel again, it can't throw focus
// back to the panel header by iself.
// This is why we nudge it a little here; the assumption is that
// if panel expansion has been caused by keyboard action
// on focused placeholder expand tool, then the logical focus transition
// is to panel header's collapse tool.
if (me.focusHeaderCollapseTool && collapseTool) {
collapseTool.focus();
}
me.focusHeaderCollapseTool = false;
placeholder.ariaEl.dom.setAttribute('aria-expanded', true);
me.ariaEl.dom.setAttribute('aria-expanded', true);
if (expandTool && expandTool._ariaRole) {
expandTool.ariaEl.dom.setAttribute('role', expandTool._ariaRole);
expandTool.ariaEl.dom.setAttribute('aria-label', expandTool._ariaLabel);
expandTool._ariaRole = expandTool._ariaLabel = null;
}
me.isCollapsingOrExpanding = 0;
me.fireEvent('expand', me);
me.fireEvent('endfloat', me);
},
remove: function(component, autoDestroy) {
var dockedItems = this.dockedItems;
// When the panel is destroyed, dockedItems is nulled
if (dockedItems && dockedItems.contains(component)) {
this.removeDocked(component, autoDestroy);
}
else {
this.callParent([component, autoDestroy]);
}
return component;
},
/**
* Removes a CSS class from the body element.
* @param {String/String[]} cls The class to remove
* @return {Ext.panel.Panel} this
*/
removeBodyCls: function(cls) {
var me = this,
body = me.rendered ? me.body : me.getProtoBody();
body.removeCls(cls);
return me;
},
removeUIClsFromElement: function(cls) {
var me = this,
result = me.callParent(arguments);
me.removeBodyCls([
Ext.baseCSSPrefix + cls,
me.baseCls + '-body-' + cls,
me.baseCls + '-body-' + me.ui + '-' + cls
]);
return result;
},
restoreDimension: function() {
var dir = this.collapseDirection;
// If we're collapsing top/bottom, we want to restore the height
// If we're collapsing left/right, we want to restore the width
return (dir === 'top' || dir === 'bottom') ? 'height' : 'width';
},
restoreHiddenDocked: function() {
// Re-show Panel content which was hidden after collapse.
this.setDockedItemsVisibility(this.hiddenOnCollapse, true);
},
/**
* Sets the body style according to the passed parameters.
* @param {Mixed} style A full style specification string, or object, or the name of a style
* property to set.
* @param {String} value If the first param was a style property name, the style property value.
* @return {Ext.panel.Panel} this
*/
setBodyStyle: function(style, value) {
var me = this,
body = me.rendered ? me.body : me.getProtoBody();
if (Ext.isFunction(style)) {
style = style();
}
if (arguments.length === 1) {
if (Ext.isString(style)) {
style = Ext.Element.parseStyles(style);
}
body.setStyle(style);
}
else {
body.setStyle(style, value);
}
return me;
},
/**
* @method setBorder
* @inheritdoc
*/
setBorder: function(border, targetEl) {
if (targetEl) {
// skip out here, the panel will set the border on the body/header during rendering
return;
}
// eslint-disable-next-line vars-on-top
var me = this,
header = me.header;
if (!border) {
border = 0;
}
else if (border === true) {
border = '1px';
}
else {
border = me.unitizeBox(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;
},
/**
* Collapses or expands the panel.
* @param {Boolean} collapsed `true` to collapse the panel, `false` to expand it.
*/
setCollapsed: function(collapsed) {
this[collapsed ? 'collapse' : 'expand']();
},
/**
* Set visibility of docked items after the panel is collapsed or expanded
*
* @param {Ext.dom.CompositeElement} els
* @param {Boolean} show
*
* @private
*/
setDockedItemsVisibility: function(els, show) {
var me = this,
items = me.getDockedItems(),
len = items.length,
i = 0,
item, reExpander;
if (me.header !== false) {
reExpander = me.getReExpander();
}
for (; i < len; i++) {
item = items[i];
if (item && item !== reExpander && item.el) {
els.add(item.el);
}
}
els.setStyle('visibility', show ? '' : 'hidden');
els.clear();
},
setGlyph: function(glyph) {
this.setHeaderConfig(glyph, 'glyph', 'setGlyph', true);
},
setIcon: function(icon) {
this.setHeaderConfig(icon, 'icon', 'setIcon', true);
},
setIconCls: function(iconCls) {
this.setHeaderConfig(iconCls, 'iconCls', 'setIconCls', true);
},
setIconAlign: function(iconAlign) {
this.setHeaderConfig(iconAlign, 'iconAlign', 'setIconAlign', true);
},
setTitleAlign: function(titleAlign) {
this.setHeaderConfig(titleAlign, 'titleAlign', 'setTitleAlign', true);
},
setTitlePosition: function(titlePosition) {
this.setHeaderConfig(titlePosition, 'titlePosition', 'setTitlePosition', true);
},
setTitleRotation: function(titleRotation) {
this.setHeaderConfig(titleRotation, 'titleRotation', 'setTitleRotation', true);
},
/**
* Sets the title of this panel.
* @param {String} title The new title
*/
setTitle: function(title) {
var me = this,
oldTitle = me.title;
if (title !== oldTitle && me.headingEl) {
me.headingEl.setHtml(title);
}
this.setHeaderConfig(title, 'title', 'setTitle', false);
},
setHeaderConfig: function(value, prop, setter, addToHeaderCfg) {
var me = this,
oldValue = me[prop],
header = me.header,
placeholder = me.placeholder,
reExpander = me.reExpander,
eventName;
if (value !== oldValue) {
me[prop] = value;
if (header) {
if (header.isHeader) {
header[setter](value);
}
else if (addToHeaderCfg) {
header[prop] = value;
}
}
else if (me.rendered || me.afterHeaderInit) {
me.updateHeader();
}
if (reExpander) {
reExpander[setter](value);
}
if (placeholder && placeholder[setter]) {
placeholder[setter](value);
}
eventName = prop.toLowerCase() + 'change';
if (me.hasListeners[eventName]) {
me.fireEvent(eventName, me, value, oldValue);
}
}
},
setHiddenDocked: function() {
// Hide Panel content except reExpander using visibility to prevent focusing of contained
// elements.
// Track what we hide to re-show on expand except for docked items
// Until the panel is expanded the docked items might have been removed
var me = this,
toHide = new Ext.dom.CompositeElement();
me.hiddenOnCollapse.add(me.body);
toHide.add(me.body);
me.setDockedItemsVisibility(toHide, false);
},
/**
* @method setUI
* @inheritdoc
*/
setUI: function(ui) {
var me = this;
me.callParent(arguments);
if (me.header && me.header.rendered) {
me.header.setUI(ui);
}
},
/**
* 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();
},
updateCollapseTool: function() {
var me = this,
collapseTool = me.collapseTool,
toolCfg;
if (!collapseTool && me.collapsible) {
me.collapseDirection = me.collapseDirection || me.getHeaderPosition() || 'top';
toolCfg = {
xtype: 'tool',
handler: me.toggleCollapse,
scope: me
};
// In accordion layout panels are collapsible/expandable with keyboard
// via the panel title that is focusable. There is no need to have a separate
// collapse/expand tool for keyboard interaction but we still have to react
// to mouse clicks, and historically accordion panels had coolapse tools
// so we leave the tool but make it unfocusable and keyboard inactive.
// Note that we do the same thing for the automatically added close tool
// but NOT for the other tools.
if (me.isAccordionPanel) {
toolCfg.focusable = false;
toolCfg.ariaRole = 'presentation';
}
me.collapseTool = me.expandTool = collapseTool = Ext.widget(toolCfg);
}
if (collapseTool) {
if (me.collapsed && !me.isPlaceHolderCollapse()) {
collapseTool.setType('expand-' + me.getOppositeDirection(me.collapseDirection));
collapseTool.setTooltip(me.expandToolText);
}
else {
collapseTool.setType('collapse-' + me.collapseDirection);
collapseTool.setTooltip(me.collapseToolText);
}
}
},
navigateAccordionHeader: function(e) {
var me = this,
key, target;
key = e.getKey();
switch (key) {
case e.UP:
case e.LEFT:
target = me.findAccordionSibling('prev');
break;
case e.DOWN:
case e.RIGHT:
target = me.findAccordionSibling('next');
break;
case e.HOME:
target = me.findAccordionSibling('first');
break;
case e.END:
target = me.findAccordionSibling('last');
break;
// Before closing the panel we need to fall back to the previous one,
// or to the next one if there is no previous one in the list.
// Jumping to the first panel header does not seem logical.
case e.DELETE:
target = me.findAccordionSibling('prev') || me.findAccordionSibling('next');
// We also need to prevent the panel from closing if it's the only one
// panel left in the accordion layout.
if (!target) {
e.doNotClose = true;
}
break;
}
// We need to stop the event in to prevent scrolling the parent container.
e.stopEvent();
if (target && target !== me) {
target.header.titleCmp.focus();
}
},
navigateAccordionBody: function(e) {
var target;
if (e.getKey() === e.UP) {
// Ctrl-Up within the panel body should focus the header element
target = this;
}
// These events are very particular; if they bubbled up to the panel body
// it means they were not consumed at the origin components.
e.stopEvent();
if (target) {
target.header.titleCmp.focus();
}
},
findAccordionSibling: function(which, forceFind) {
var me = this,
siblingSel = '[isAccordionPanel]',
sibling;
switch (which) {
case 'prev':
sibling = me.prev(siblingSel);
if (!sibling) {
if (me.accordionWrapOver) {
sibling = me.ownerCt.child(siblingSel + ':last');
}
else if (forceFind) {
sibling = me;
}
}
break;
case 'next':
sibling = me.next(siblingSel);
if (!sibling) {
if (me.accordionWrapOver) {
sibling = me.ownerCt.child(siblingSel + ':first');
}
else if (forceFind) {
sibling = me;
}
}
break;
case 'first':
sibling = me.ownerCt.child(siblingSel + ':first');
break;
case 'last':
sibling = me.ownerCt.child(siblingSel + ':last');
break;
}
return sibling;
},
fireDefaultButton: function(e) {
var me = this,
refHolder, btn;
if (e.target.tagName === 'TEXTAREA' || e.target.getAttribute('aria-multiline') === 'true') {
return true;
}
refHolder = me.lookupReferenceHolder(/* skipThis = */ false) || me;
btn = refHolder.lookupReference(me.defaultButton);
// We call it defaultButton but it can really be any object
// that implements `click` method
if (btn && btn.click) {
btn.click(e);
// Stop event propagation through DOM publisher
e.stopEvent();
// ... and in case we have other listeners,
// stop the loop in Ext.util.Event too
return false;
}
//<debug>
else if (!btn) {
Ext.raise({
msg: 'No component found for defaultButton reference "' +
me.defaultButton + '" in ' + me.xtype + ' ' + me.id,
panel: me
});
}
else {
Ext.raise({
msg: 'Component referenced by defaultButton config "' +
me.defaultButton + '" in ' + me.xtype + ' ' + me.id +
' does not have click() method',
component: btn
});
}
//</debug>
},
maybeClose: function(e) {
var me = this;
if (me.closable) {
me.navigateAccordionHeader(e);
// Can't close the last panel in accordion
if (!e.doNotClose) {
me.close();
}
}
},
canFocus: function(skipVisibility, includeFocusTarget) {
// If we are placeholder collapsed, then the placeholder may be focusable.
if (this.collapsed) {
// eslint-disable-next-line max-len
return !!(this.placeholder && this.placeholder.canFocus(skipVisibility, includeFocusTarget));
}
return this.mixins.focusable.canFocus.call(this, skipVisibility, includeFocusTarget);
},
focus: function() {
var me = this,
placeholder = me.placeholder;
if (me.collapsed && placeholder && placeholder.canFocus()) {
placeholder.focus.apply(placeholder, arguments);
}
else {
me.callParent(arguments);
}
},
onFocusEnter: function(e) {
var me = this,
ariaDom = me.ariaEl.dom;
me.callParent([e]);
if (me.isAccordionPanel && ariaDom) {
ariaDom.setAttribute('aria-selected', true);
}
},
onFocusLeave: function(e) {
var me = this,
ariaDom = me.ariaEl.dom;
me.callParent([e]);
if (me.isAccordionPanel && ariaDom) {
ariaDom.setAttribute('aria-selected', 'false');
}
},
updateHeaderPosition: function(position) {
var header = this.header;
if (header && header.isHeader) {
header.setDock(position);
}
},
/**
* @private
*/
unghost: function(show, matchPosition, focus) {
var me = this,
el = me.el,
ghostPanel = me.ghostPanel;
if (!ghostPanel) {
return;
}
// Show el first to restore the element to the original
// visibility mode.
el.show();
el.setVisibilityMode(me.elVisMode);
if (show !== false) {
if (matchPosition !== false) {
me.setPagePosition(ghostPanel.getXY());
}
}
else {
el.hide();
}
ghostPanel.el.hide();
ghostPanel.setHiddenState(true);
},
/**
* 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.getTitle(),
tools = me.tools,
icon = me.getIcon(),
glyph = me.getGlyph(),
iconCls = me.getIconCls(),
hasIcon = glyph || icon || iconCls,
ariaDom = me.ariaEl.dom,
headerPosition = me.getHeaderPosition(),
vertical = headerPosition === 'left' || headerPosition === 'right',
headingEl, ariaAttr;
if (Ext.isObject(header) || (header !== false && (force || (title || hasIcon) ||
(tools && tools.length) || (me.collapsible && !me.titleCollapse)))) {
if (header && header.isHeader) {
header.dockToEl = true;
header.show();
}
else {
if (Ext.isObject(header)) {
me.syncHeaderConfigs(header);
}
// Apply the header property to the header config
header = me.header = Ext.widget(Ext.merge({
xtype: 'header',
title: title,
titleAlign: me.getTitleAlign(),
titlePosition: me.getTitlePosition(),
vertical: vertical,
dock: me.getHeaderPosition() || 'top',
dockToEl: true,
titleRotation: me.getTitleRotation(),
textCls: me.headerTextCls,
iconCls: iconCls,
iconAlign: me.getIconAlign(),
icon: icon,
glyph: glyph,
baseCls: me.baseCls + '-header',
tools: tools,
ui: me.ui,
id: me.id + '_header',
overCls: me.headerOverCls,
indicateDrag: me.draggable,
frame: (me.frame || me.alwaysFramed) && me.frameHeader,
ignoreParentFrame: me.frame || me.overlapHeader,
ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
isAccordionHeader: me.isAccordionPanel,
ownerCt: me,
synthetic: true, // not user-defined
listeners: me.collapsible && me.titleCollapse
? {
click: me.toggleCollapse,
scope: me
}
: null
}, me.header));
// Header's onAdd mutates the tools array.
// It replaces tool configs at each index with the instantiated tool
// It also injects the tool instances as properties keyed by their type.
me.addDocked(header, 0);
}
// Accordion panels are tightly coupled to their headers' titleCmp
// via aria-labelledby attribute. There should be no aria-label.
if (me.isAccordionPanel) {
if (ariaDom) {
ariaDom.setAttribute('aria-labelledby', header.id + '-title');
ariaDom.removeAttribute('aria-label');
}
else {
ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
ariaAttr['aria-labelledby'] = header.id + '-title';
delete ariaAttr['aria-label'];
}
}
else {
if (title) {
// If the panel is not an ARIA a region, it still should have
// an accessible name via aria-labelledby attribute unless
// it is a tabpanel in which case aria-labelledby points
// to the corresponding tab and is managed by TabPanel class.
if (me.ariaRole !== 'tabpanel') {
if (ariaDom) {
ariaDom.setAttribute('aria-labelledby', header.id + '-title-textEl');
ariaDom.removeAttribute('aria-label');
}
else {
ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
ariaAttr['aria-labelledby'] = header.id + '-title-textEl';
delete ariaAttr['aria-label'];
}
}
}
// If there is no title, just make sure no aria-label attribute was added
else if (me.ariaRenderAttributes) {
delete me.ariaRenderAttributes['aria-label'];
}
}
}
else {
if (header) {
header.hide();
}
// Title may contain HTML markup
title = Ext.util.Format.stripTags(title);
// aria-labelledby could have been set by the TabPanel.onAdd()
if (ariaDom) {
if (!ariaDom.hasAttribute('aria-labelledby')) {
if (title) {
ariaDom.setAttribute('aria-label', title);
}
else {
ariaDom.removeAttribute('aria-label');
}
}
}
else {
ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
if (!ariaAttr['aria-labelledby']) {
if (title) {
ariaAttr['aria-label'] = title;
}
else {
delete ariaAttr['aria-label'];
}
}
}
}
// If the panel is a child of the Viewport that has border layout,
// that automatically makes it a region unless the user overrode that.
if (me.isViewportBorderChild && !me.hasOwnProperty('ariaRole')) {
me.ariaRole = 'region';
}
//<debug>
if (me.ariaRole === 'region' && !title) {
Ext.ariaWarn(
me,
"Panel " + me.id + " is a region section of the application, " +
"but it does not have a title. Per WAI-ARIA, all regions " +
"should have a heading element that contains region's title."
);
}
//</debug>
// An ARIA region should have a title, and a heading which we implement
// as an element placed before all other elements within the panel's
// main element. The headingEl is hidden via clipping to avoid
// visual impact while still allowing it to be published to
// Assistive Technologies such as screen readers.
if (title && me.ariaRole === 'region') {
headingEl = me.headingEl;
if (headingEl) {
headingEl.setHtml(title);
}
else {
if (me.rendered) {
me.headingEl = Ext.dom.Helper.insertFirst(me.el, {
tag: 'div',
id: me.id + '-headingEl',
role: 'heading',
'class': Ext.baseCSSPrefix + 'hidden-clip',
style: 'height:0',
html: title
}, true);
ariaDom.removeAttribute('aria-label');
ariaDom.setAttribute('aria-labelledby', me.id + '-headingEl');
}
else {
me.headingText = me.title;
ariaAttr = me.ariaRenderAttributes || (me.ariaRenderAttributes = {});
ariaAttr['aria-labelledby'] = me.id + '-headingEl';
delete ariaAttr['aria-label'];
}
}
}
else if (me.headingEl) {
me.headingEl.destroy();
me.headingEl = null;
}
},
// ***********************************************************************************
// End Methods
// ***********************************************************************************
// </editor-fold>
statics: {
floatCls: Ext.baseCSSPrefix + 'border-region-slide-in'
},
privates: {
addUIToElement: function() {
var me = this;
me.callParent(arguments);
me.addBodyCls(me.baseCls + '-body-' + me.ui);
},
applyTargetCls: function(targetCls) {
this.getProtoBody().addCls(targetCls);
},
getDefaultContentTarget: function() {
return this.body;
},
getTargetEl: function() {
var me = this;
return me.body || me.protoBody || me.frameBody || me.el;
},
/**
* @private
*/
initDraggable: function() {
var me = this;
// For just simple dragging like Windows
if (me.simpleDrag) {
me.initSimpleDraggable();
}
// For DD package aware dragging of Panels
else {
/**
* @property {Ext.dd.DragSource/Ext.util.ComponentDragger} dd
*
* Only present if this Panel has been configured with {@link #cfg-draggable}
* `true`.
*
* ##Simple dragging##
*
* If this Panel is configured {@link #cfg-simpleDrag} `true` (the default
* is `false`), this property will reference an instance of
* {@link Ext.util.ComponentDragger} (A subclass of
* {@link Ext.dd.DragTracker DragTracker}) which handles moving the Panel's
* DOM Element, and constraining according to the {@link #constrain} and
* {@link #constrainHeader} .
*
* This object fires various events during its lifecycle and during
* a drag operation.
*
* ##Complex dragging interacting with other DragDrop instances##
*
* By default, this property in a {@link #cfg-draggable} Panel 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 also {@link #cfg-draggable}.
*/
me.dd = new Ext.panel.DD(me, Ext.isBoolean(me.draggable) ? null : me.draggable);
}
},
initResizable: function(resizable) {
this.callParent([resizable]);
if (this.collapsed) {
this.resizer.disable();
}
},
/**
* @private
* Override Component.initDraggable.
* Panel (and subclasses) use the header element as the delegate.
*/
initSimpleDraggable: function() {
var me = this,
dd = me.draggable;
if (!me.header && !dd.delegate) {
me.updateHeader(true);
}
/*
* Check the header here again. If for whatever reason it wasn't created in
* updateHeader (we were configured with header: false) then we'll just ignore
* the rest since the header acts as the drag handle.
*/
if (me.header || dd.delegate) {
dd = Ext.apply({
el: me.el,
delegate: me.header && me.header.el
}, dd);
// Add extra configs if Window is specified to be constrained
if (me.constrain || me.constrainHeader) {
dd.constrain = me.constrain;
dd.constrainDelegate = me.constrainHeader;
dd.constrainTo = me.constrainTo || me.container;
}
dd = me.dd = new Ext.util.ComponentDragger(me, dd);
me.relayEvents(dd, ['dragstart', 'drag', 'dragend']);
}
},
removeUIFromElement: function() {
var me = this;
me.callParent(arguments);
me.removeBodyCls(me.baseCls + '-body-' + me.ui);
},
setupRenderTpl: function(renderTpl) {
this.callParent(arguments);
this.setupDockingRenderTpl(renderTpl);
},
slideOutFloatedPanel: function(preventAnimate) {
var me = this,
compEl = me.el,
collapseDirection,
focusTarget,
afterSlideOut = 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');
// Event fired when floated stateus ends
me.fireEvent('endfloat', me);
};
if (me.isSliding || me.destroyed) {
return;
}
me.isSliding = true;
me.floated = false;
me.slideOutFloatedPanelBegin();
if (preventAnimate) {
compEl.hide();
return afterSlideOut();
}
if (typeof me.collapsed === 'string') {
collapseDirection = me.convertCollapseDir(me.collapsed);
}
me.fireEvent('beginfloat', me);
compEl.slideOut(collapseDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: afterSlideOut
}
});
// Focus the placeholder which should delegate into itself
if (this.containsFocus) {
focusTarget = this.findFocusTarget();
if (focusTarget) {
focusTarget.focus();
}
}
},
/**
* This method begins the slide out of the floated panel.
* @private
*/
slideOutFloatedPanelBegin: function() {
var me = this;
me.collapsed = me.floatedFromCollapse;
me.setHiddenState(true);
me.floatedFromCollapse = null;
// Remove mouse leave/enter monitors, and the mousedown monitor
Ext.destroy(me.pointerLeaveListener, me.phHoverListeners, me.elHoverListeners);
},
/**
* This method cleans up after the slide out of the floated panel.
* @private
*/
slideOutFloatedPanelEnd: function(suppressEvents) {
var me = this;
if (me.collapseTool) {
me.collapseTool.el.show();
}
me.slideOutTask.cancel();
me.isSliding = false;
if (!suppressEvents) {
me.fireEvent('unfloat', me);
}
},
/*
* Syncs shared configs that might be specified on header config
* @param {Object} header
*/
syncHeaderConfigs: function(header) {
var me = this,
config, value;
for (config in header) {
value = header[config];
if (me.headerConfigs[config] && value !== undefined) {
// set config directly so we don't fire events
me[config] = value;
}
}
}
} // private
}, function() {
var proto = this.prototype;
proto.animCollapse = Ext.enableFx;
proto.placeholderCollapseHideMode = Ext.Element.VISIBILITY;
});