extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/panel/Panel.js

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