/**
 * @class Ext.Panel
 * @xtype panel
 * @extend Ext.Container
 *
 * Panels add extra functionality by providing various options for configuring a header
 * that is docked inside the panel.
 * See:
 *
 * - {@link #title}
 * - {@link #iconCls}
 * - {@link #tools}
 * - {@link #closable}
 *
 * It is also possible to configure the header directly using the {@link #header}
 * configuration. See {@link Ext.panel.Header Panel Header} for more information.
 * 
 * Panels are also useful as Overlays - containers that float over your application.
 * If configured with `{@link #cfg-anchor: true}`, when you {@link #showBy} another
 * component, there will be an anchor arrow pointing to the reference component.
 *
 *     @example packages=[reactor]
 *     import React, { Component } from 'react';
 *     import { ExtReact, Container, Panel, Button } from '@sencha/ext-react';
 *
 *     Ext.require('Ext.Toast');
 *
 *     function toolHandler(owner, tool) {
 *         Ext.toast(`You clicked ${tool.config.type}`);
 *     }
 *
 *     export default class PanelExample extends Component {
 *
 *         render() {
 *             return (
 *                 <ExtReact>
 *                     <Container>
 *                         <Panel
 *                             shadow
 *                             title="Panel"
 *                             height={300}
 *                             width={500}
 *                             tools={[
 *                                 { type: 'minimize', handler: toolHandler },
 *                                 { type: 'refresh', handler: toolHandler },
 *                                 { type: 'save', handler: toolHandler },
 *                                 { type: 'search', handler: toolHandler },
 *                                 { type: 'close', handler: toolHandler }
 *                             ]}
 *                         >
 *                             <p>Panel Body</p>
 *                         </Panel>
 *                         <Button ui="action" handler={() => this.refs.modal.show()} margin="20 0 0 0" text="Show Modal"/>
 *                         <Panel
 *                             ref="modal"
 *                             title="Floated Panel"
 *                             modal
 *                             floated
 *                             centered
 *                             hideOnMaskTap
 *                             width={Ext.filterPlatform('ie10') ? '100%' : (Ext.os.deviceType == 'Phone') ? 260 : 400}
 *                             maxHeight={Ext.filterPlatform('ie10') ? '30%' : (Ext.os.deviceType == 'Phone') ? 220 : 400}
 *                             showAnimation={{
 *                                 type: 'popIn',
 *                                 duration: 250,
 *                                 easing: 'ease-out'
 *                             }}
 *                             hideAnimation={{
 *                                 type: 'popOut',
 *                                 duration: 250,
 *                                 easing: 'ease-out'
 *                             }}
 *                         >
 *                             <p>This is a modal, centered and floated panel. hideOnMaskTap is true by default so we can tap anywhere outside the overlay to hide it.</p>
 *                         </Panel>
 *                     </Container>
 *                 </ExtReact>
 *             )
 *         }
 *     }
 *
 */
 
/**
 * @cfg {Boolean/Object} [header=null]
 * Pass as `false` to prevent a header from being created.
 *
 * You may also assign a header with a config object (optionally containing an `xtype`)
 * to custom-configure your panel's header.
 *
 * See {@link Ext.panel.Header} for all the options that may be specified here.
 */
 
/**
 * @cfg [border=false]
 * @inheritdoc
 */
 
/**
 * @cfg {Boolean} [bodyBorder=null]
 * - `true` to enable the border around the panel body (as defined by the theme)
 * Note that even when enabled, the bodyBorder is only visible when there are docked
 * items around the edges of the panel.  Where the bodyBorder touches the panel's outer
 * border it is automatically collapsed into a single border.
 *
 * - `false` to disable the body border
 *
 * - `null` - use the value of {@link #border} as the value for bodyBorder
 */
 
/**
 * @cfg {Number/Boolean/String} [bodyPadding=null]
 * 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} [bodyStyle=null]
 * Custom CSS styles to be applied to the panel's body element, which can be supplied
 * as a valid CSS style string or an object containing style property name/value pairs.
 * For example, these two formats are interpreted to be equivalent:
 *
 *     bodyStyle: 'background:#ffc; padding:10px;'
 *
 *     bodyStyle: {
 *         background: '#ffc',
 *         padding: '10px'
 *     }
 *
 * @accessor set
 * @since 6.5.0
 */
 
/**
 * @cfg {Object/Ext.Button[]} [buttons=null]
 * The buttons for this panel to be displayed in the `buttonToolbar` as a keyed
 * object (or array) of button configuration objects.
 *
 *     <Panel
 *         html="hello world"
 *         padding={20}
 *         buttons={{
 *             ok: {
 *                 text: "OK",
 *                 handler: this.onOK
 *             }
 *         }}
 *     />
 *
 * For buttons that are defined in `standardButtons` (such as `'ok'`), there is a
 * more convenient short-hand for this config:
 *
 *     <Panel
 *         html="hello world"
 *         padding={20}
 *         buttons={{
 *             ok: this.onOk,
 *             cancel: this.onCancel
 *         }}
 *     />
 *
 * The {@link #minButtonWidth} is used as the default
 * {@link Ext.Button#minWidth minWidth} for the buttons in the buttons toolbar.
 * @since 6.5.0
 */
 
/**
 * @cfg {'top'/'right'/'bottom'/'left'} [headerPosition='top']
 * The position of the header. Ignored if no {@link #cfg-header} is created.
 *
 * @since 6.5.0
 */
 
/**
 * @cfg {Boolean/Object} [header=null]
 * Pass as `false` to prevent a header from being created.
 *
 * You may also assign a header with a config object (optionally containing an `xtype`)
 * to custom-configure your panel's header.
 *
 * See {@link Ext.panel.Header} for all the options that may be specified here.
 */
 
/**
 * @cfg [icon=null]
 * @inheritdoc Ext.panel.Header#cfg-icon
 */
 
/**
 * @cfg [iconCls=null]
 * @inheritdoc Ext.panel.Header#cfg-iconCls
 */
 
/**
 * @cfg [title=null]
 * @inheritdoc Ext.panel.Header#cfg-title
 */
 
/**
 * @cfg {Object[]/Ext.panel.Tool[]} [tools=null]
 * 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.
 */
 
/**
 * @cfg {Boolean} [anchor=false]
 * Configure `true` to show an anchor element pointing to the target component when this Panel is
 * {@link #showBy shown by} another component.
 */
 
/**
 * @cfg {Boolean} [closable=null]
 * True to display the 'close' tool button and allow the user to close the panel, 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'.
 */
 
/**
 * @cfg {String} [closeAction='destroy']
 * 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.
 */
 
/**
 * @cfg {String} [closeToolText='Close panel']
 * 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
 */