docs/source/Panel3.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-panel-Panel'>/**
  19 </span> * Panel is a container that has specific functionality and structural components that make it the perfect building
  20  * block for application-oriented user interfaces.
  21  *
  22  * Panels are, by virtue of their inheritance from {@link Ext.container.Container}, capable of being configured with a
  23  * {@link Ext.container.Container#layout layout}, and containing child Components.
  24  *
  25  * When either specifying child {@link #items} of a Panel, or dynamically {@link Ext.container.Container#add adding}
  26  * Components to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those
  27  * child elements need to be sized using one of Ext's built-in `{@link Ext.container.Container#layout layout}`
  28  * schemes. By default, Panels use the {@link Ext.layout.container.Auto Auto} scheme. This simply renders child
  29  * components, appending them one after the other inside the Container, and **does not apply any sizing** at all.
  30  *
  31  * {@img Ext.panel.Panel/panel.png Panel components}
  32  *
  33  * A Panel may also contain {@link #bbar bottom} and {@link #tbar top} toolbars, along with separate {@link
  34  * Ext.panel.Header header}, {@link #fbar footer} and body sections.
  35  *
  36  * Panel also provides built-in {@link #collapsible collapsible, expandable} and {@link #closable} behavior. Panels can
  37  * be easily dropped into any {@link Ext.container.Container Container} or layout, and the layout and rendering pipeline
  38  * is {@link Ext.container.Container#add completely managed by the framework}.
  39  *
  40  * **Note:** By default, the `{@link #closable close}` header tool _destroys_ the Panel resulting in removal of the
  41  * Panel and the destruction of any descendant Components. This makes the Panel object, and all its descendants
  42  * **unusable**. To enable the close tool to simply _hide_ a Panel for later re-use, configure the Panel with
  43  * `{@link #closeAction closeAction}: 'hide'`.
  44  *
  45  * Usually, Panels are used as constituents within an application, in which case, they would be used as child items of
  46  * Containers, and would themselves use Ext.Components as child {@link #items}. However to illustrate simply rendering a
  47  * Panel into the document, here's how to do it:
  48  *
  49  *     @example
  50  *     Ext.create('Ext.panel.Panel', {
  51  *         title: 'Hello',
  52  *         width: 200,
  53  *         html: '&lt;p&gt;World!&lt;/p&gt;',
  54  *         renderTo: Ext.getBody()
  55  *     });
  56  *
  57  * A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a
  58  * constituent part of a Container:
  59  *
  60  *     @example
  61  *     var filterPanel = Ext.create('Ext.panel.Panel', {
  62  *         bodyPadding: 5,  // Don't want content to crunch against the borders
  63  *         width: 300,
  64  *         title: 'Filters',
  65  *         items: [{
  66  *             xtype: 'datefield',
  67  *             fieldLabel: 'Start date'
  68  *         }, {
  69  *             xtype: 'datefield',
  70  *             fieldLabel: 'End date'
  71  *         }],
  72  *         renderTo: Ext.getBody()
  73  *     });
  74  *
  75  * Note that the Panel above is not configured to render into the document, nor is it configured with a size or
  76  * position. In a real world scenario, the Container into which the Panel is added will use a {@link #layout} to render,
  77  * size and position its child Components.
  78  *
  79  * Panels will often use specific {@link #layout}s to provide an application with shape and structure by containing and
  80  * arranging child Components:
  81  *
  82  *     @example
  83  *     var resultsPanel = Ext.create('Ext.panel.Panel', {
  84  *         title: 'Results',
  85  *         width: 600,
  86  *         height: 400,
  87  *         renderTo: Ext.getBody(),
  88  *         layout: {
  89  *             type: 'vbox',       // Arrange child items vertically
  90  *             align: 'stretch',    // Each takes up full width
  91  *             padding: 5
  92  *         },
  93  *         items: [{               // Results grid specified as a config object with an xtype of 'grid'
  94  *             xtype: 'grid',
  95  *             columns: [{header: 'Column One'}],            // One header just for show. There's no data,
  96  *             store: Ext.create('Ext.data.ArrayStore', {}), // A dummy empty data store
  97  *             flex: 1                                       // Use 1/3 of Container's height (hint to Box layout)
  98  *         }, {
  99  *             xtype: 'splitter'   // A splitter between the two child items
 100  *         }, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').
 101  *             title: 'Details',
 102  *             bodyPadding: 5,
 103  *             items: [{
 104  *                 fieldLabel: 'Data item',
 105  *                 xtype: 'textfield'
 106  *             }], // An array of form fields
 107  *             flex: 2             // Use 2/3 of Container's height (hint to Box layout)
 108  *         }]
 109  *     });
 110  *
 111  * The example illustrates one possible method of displaying search results. The Panel contains a grid with the
 112  * resulting data arranged in rows. Each selected row may be displayed in detail in the Panel below. The {@link
 113  * Ext.layout.container.VBox vbox} layout is used to arrange the two vertically. It is configured to stretch child items
 114  * horizontally to full width. Child items may either be configured with a numeric height, or with a `flex` value to
 115  * distribute available space proportionately.
 116  *
 117  * This Panel itself may be a child item of, for exaple, a {@link Ext.tab.Panel} which will size its child items to fit
 118  * within its content area.
 119  *
 120  * Using these techniques, as long as the **layout** is chosen and configured correctly, an application may have any
 121  * level of nested containment, all dynamically sized according to configuration, the user's preference and available
 122  * browser size.
 123  */
 124 Ext.define('Ext.panel.Panel', {
 125     extend: 'Ext.panel.AbstractPanel',
 126     requires: [
 127         'Ext.panel.Header',
 128         'Ext.fx.Anim',
 129         'Ext.util.KeyMap',
 130         'Ext.panel.DD',
 131         'Ext.XTemplate',
 132         'Ext.layout.component.Dock',
 133         'Ext.util.Memento'
 134     ],
 135     alias: 'widget.panel',
 136     alternateClassName: 'Ext.Panel',
 137
 138 <span id='Ext-panel-Panel-cfg-collapsedCls'>    /**
 139 </span>     * @cfg {String} collapsedCls
 140      * A CSS class to add to the panel's element after it has been collapsed.
 141      */
 142     collapsedCls: 'collapsed',
 143
 144 <span id='Ext-panel-Panel-cfg-animCollapse'>    /**
 145 </span>     * @cfg {Boolean} animCollapse
 146      * `true` to animate the transition when the panel is collapsed, `false` to skip the animation (defaults to `true`
 147      * if the {@link Ext.fx.Anim} class is available, otherwise `false`). May also be specified as the animation
 148      * duration in milliseconds.
 149      */
 150     animCollapse: Ext.enableFx,
 151
 152 <span id='Ext-panel-Panel-cfg-minButtonWidth'>    /**
 153 </span>     * @cfg {Number} minButtonWidth
 154      * Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default
 155      * value for the {@link Ext.button.Button#minWidth} config of each Button added to the **footer toolbar** via the
 156      * {@link #fbar} or {@link #buttons} configurations. It will be ignored for buttons that have a minWidth configured
 157      * some other way, e.g. in their own config object or via the {@link Ext.container.Container#defaults defaults} of
 158      * their parent container.
 159      */
 160     minButtonWidth: 75,
 161
 162 <span id='Ext-panel-Panel-cfg-collapsed'>    /**
 163 </span>     * @cfg {Boolean} collapsed
 164      * `true` to render the panel collapsed, `false` to render it expanded.
 165      */
 166     collapsed: false,
 167
 168 <span id='Ext-panel-Panel-cfg-collapseFirst'>    /**
 169 </span>     * @cfg {Boolean} collapseFirst
 170      * `true` to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in
 171      * the panel's title bar, `false` to render it last.
 172      */
 173     collapseFirst: true,
 174
 175 <span id='Ext-panel-Panel-cfg-hideCollapseTool'>    /**
 176 </span>     * @cfg {Boolean} hideCollapseTool
 177      * `true` to hide the expand/collapse toggle button when `{@link #collapsible} == true`, `false` to display it.
 178      */
 179     hideCollapseTool: false,
 180
 181 <span id='Ext-panel-Panel-cfg-titleCollapse'>    /**
 182 </span>     * @cfg {Boolean} titleCollapse
 183      * `true` to allow expanding and collapsing the panel (when `{@link #collapsible} = true`) by clicking anywhere in
 184      * the header bar, `false`) to allow it only by clicking to tool butto).
 185      */
 186     titleCollapse: false,
 187
 188 <span id='Ext-panel-Panel-cfg-collapseMode'>    /**
 189 </span>     * @cfg {String} collapseMode
 190      * **Important: this config is only effective for {@link #collapsible} Panels which are direct child items of a
 191      * {@link Ext.layout.container.Border border layout}.**
 192      *
 193      * When _not_ a direct child item of a {@link Ext.layout.container.Border border layout}, then the Panel's header
 194      * remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header
 195      * (orientated correctly depending on the {@link #collapseDirection}) will be inserted to show a the title and a re-
 196      * expand tool.
 197      *
 198      * When a child item of a {@link Ext.layout.container.Border border layout}, this config has two options:
 199      *
 200      * - **`undefined/omitted`**
 201      *
 202      *   When collapsed, a placeholder {@link Ext.panel.Header Header} is injected into the layout to represent the Panel
 203      *   and to provide a UI with a Tool to allow the user to re-expand the Panel.
 204      *
 205      * - **`header`** :
 206      *
 207      *   The Panel collapses to leave its header visible as when not inside a {@link Ext.layout.container.Border border
 208      *   layout}.
 209      */
 210
 211 <span id='Ext-panel-Panel-cfg-placeholder'>    /**
 212 </span>     * @cfg {Ext.Component/Object} placeholder
 213      * **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
 214      * {@link Ext.layout.container.Border border layout} when not using the `'header'` {@link #collapseMode}.**
 215      *
 216      * **Optional.** A Component (or config object for a Component) to show in place of this Panel when this Panel is
 217      * collapsed by a {@link Ext.layout.container.Border border layout}. Defaults to a generated {@link Ext.panel.Header
 218      * Header} containing a {@link Ext.panel.Tool Tool} to re-expand the Panel.
 219      */
 220
 221 <span id='Ext-panel-Panel-cfg-floatable'>    /**
 222 </span>     * @cfg {Boolean} floatable
 223      * **Important: This config is only effective for {@link #collapsible} Panels which are direct child items of a
 224      * {@link Ext.layout.container.Border border layout}.**
 225      *
 226      * true to allow clicking a collapsed Panel's {@link #placeholder} to display the Panel floated above the layout,
 227      * false to force the user to fully expand a collapsed region by clicking the expand button to see it again.
 228      */
 229     floatable: true,
 230
 231 <span id='Ext-panel-Panel-cfg-overlapHeader'>    /**
 232 </span>     * @cfg {Boolean} overlapHeader
 233      * True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and
 234      * is done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header
 235      * which does not have frame:true, this will need to be set to true.
 236      */
 237
 238 <span id='Ext-panel-Panel-cfg-collapsible'>    /**
 239 </span>     * @cfg {Boolean} collapsible
 240      * True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button
 241      * area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool.
 242      *
 243      * See {@link #collapseMode} and {@link #collapseDirection}
 244      */
 245     collapsible: false,
 246
 247 <span id='Ext-panel-Panel-cfg-collapseDirection'>    /**
 248 </span>     * @cfg {Boolean} collapseDirection
 249      * The direction to collapse the Panel when the toggle button is clicked.
 250      *
 251      * Defaults to the {@link #headerPosition}
 252      *
 253      * **Important: This config is _ignored_ for {@link #collapsible} Panels which are direct child items of a {@link
 254      * Ext.layout.container.Border border layout}.**
 255      *
 256      * Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
 257      */
 258
 259 <span id='Ext-panel-Panel-cfg-closable'>    /**
 260 </span>     * @cfg {Boolean} closable
 261      * True to display the 'close' tool button and allow the user to close the window, false to hide the button and
 262      * disallow closing the window.
 263      *
 264      * By default, when close is requested by clicking the close button in the header, the {@link #close} method will be
 265      * called. This will _{@link Ext.Component#destroy destroy}_ the Panel and its content meaning that it may not be
 266      * reused.
 267      *
 268      * To make closing a Panel _hide_ the Panel so that it may be reused, set {@link #closeAction} to 'hide'.
 269      */
 270     closable: false,
 271
 272 <span id='Ext-panel-Panel-cfg-closeAction'>    /**
 273 </span>     * @cfg {String} closeAction
 274      * The action to take when the close header tool is clicked:
 275      *
 276      * - **`'{@link #destroy}'`** :
 277      *
 278      *   {@link #destroy remove} the window from the DOM and {@link Ext.Component#destroy destroy} it and all descendant
 279      *   Components. The window will **not** be available to be redisplayed via the {@link #show} method.
 280      *
 281      * - **`'{@link #hide}'`** :
 282      *
 283      *   {@link #hide} the window by setting visibility to hidden and applying negative offsets. The window will be
 284      *   available to be redisplayed via the {@link #show} method.
 285      *
 286      * **Note:** This behavior has changed! setting *does* affect the {@link #close} method which will invoke the
 287      * approriate closeAction.
 288      */
 289     closeAction: 'destroy',
 290
 291 <span id='Ext-panel-Panel-cfg-dockedItems'>    /**
 292 </span>     * @cfg {Object/Object[]} dockedItems
 293      * A component or series of components to be added as docked items to this panel. The docked items can be docked to
 294      * either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:
 295      *
 296      *     var panel = new Ext.panel.Panel({
 297      *         dockedItems: [{
 298      *             xtype: 'toolbar',
 299      *             dock: 'top',
 300      *             items: [{
 301      *                 text: 'Docked to the top'
 302      *             }]
 303      *         }]
 304      *     });
 305      */
 306
 307 <span id='Ext-panel-Panel-cfg-preventHeader'>    /**
 308 </span>      * @cfg {Boolean} preventHeader
 309       * Prevent a Header from being created and shown.
 310       */
 311     preventHeader: false,
 312
 313 <span id='Ext-panel-Panel-cfg-headerPosition'>     /**
 314 </span>      * @cfg {String} headerPosition
 315       * Specify as `'top'`, `'bottom'`, `'left'` or `'right'`.
 316       */
 317     headerPosition: 'top',
 318
 319 <span id='Ext-panel-Panel-cfg-frame'>     /**
 320 </span>     * @cfg {Boolean} frame
 321      * True to apply a frame to the panel.
 322      */
 323     frame: false,
 324
 325 <span id='Ext-panel-Panel-cfg-frameHeader'>    /**
 326 </span>     * @cfg {Boolean} frameHeader
 327      * True to apply a frame to the panel panels header (if 'frame' is true).
 328      */
 329     frameHeader: true,
 330
 331 <span id='Ext-panel-Panel-cfg-tools'>    /**
 332 </span>     * @cfg {Object[]/Ext.panel.Tool[]} tools
 333      * An array of {@link Ext.panel.Tool} configs/instances to be added to the header tool area. The tools are stored as
 334      * child components of the header container. They can be accessed using {@link #down} and {#query}, as well as the
 335      * other component methods. The toggle tool is automatically created if {@link #collapsible} is set to true.
 336      *
 337      * Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the
 338      * visual button. Any required functionality must be provided by adding handlers that implement the necessary
 339      * behavior.
 340      *
 341      * Example usage:
 342      *
 343      *     tools:[{
 344      *         type:'refresh',
 345      *         tooltip: 'Refresh form Data',
 346      *         // hidden:true,
 347      *         handler: function(event, toolEl, panel){
 348      *             // refresh logic
 349      *         }
 350      *     },
 351      *     {
 352      *         type:'help',
 353      *         tooltip: 'Get Help',
 354      *         handler: function(event, toolEl, panel){
 355      *             // show help here
 356      *         }
 357      *     }]
 358      */
 359
 360 <span id='Ext-panel-Panel-cfg-title'>    /**
 361 </span>     * @cfg {String} [title='']
 362      * The title text to be used to display in the {@link Ext.panel.Header panel header}. When a
 363      * `title` is specified the {@link Ext.panel.Header} will automatically be created and displayed unless
 364      * {@link #preventHeader} is set to `true`.
 365      */
 366
 367 <span id='Ext-panel-Panel-cfg-iconCls'>    /**
 368 </span>     * @cfg {String} iconCls
 369      * CSS class for icon in header. Used for displaying an icon to the left of a title.
 370      */
 371
 372     initComponent: function() {
 373         var me = this,
 374             cls;
 375
 376         me.addEvents(
 377
 378 <span id='Ext-panel-Panel-event-beforeclose'>            /**
 379 </span>             * @event beforeclose
 380              * Fires before the user closes the panel. Return false from any listener to stop the close event being
 381              * fired
 382              * @param {Ext.panel.Panel} panel The Panel object
 383              */
 384             'beforeclose',
 385
 386 <span id='Ext-panel-Panel-event-beforeexpand'>            /**
 387 </span>             * @event beforeexpand
 388              * Fires before this panel is expanded. Return false to prevent the expand.
 389              * @param {Ext.panel.Panel} p The Panel being expanded.
 390              * @param {Boolean} animate True if the expand is animated, else false.
 391              */
 392             &quot;beforeexpand&quot;,
 393
 394 <span id='Ext-panel-Panel-event-beforecollapse'>            /**
 395 </span>             * @event beforecollapse
 396              * Fires before this panel is collapsed. Return false to prevent the collapse.
 397              * @param {Ext.panel.Panel} p The Panel being collapsed.
 398              * @param {String} direction . The direction of the collapse. One of
 399              *
 400              *   - Ext.Component.DIRECTION_TOP
 401              *   - Ext.Component.DIRECTION_RIGHT
 402              *   - Ext.Component.DIRECTION_BOTTOM
 403              *   - Ext.Component.DIRECTION_LEFT
 404              *
 405              * @param {Boolean} animate True if the collapse is animated, else false.
 406              */
 407             &quot;beforecollapse&quot;,
 408
 409 <span id='Ext-panel-Panel-event-expand'>            /**
 410 </span>             * @event expand
 411              * Fires after this Panel has expanded.
 412              * @param {Ext.panel.Panel} p The Panel that has been expanded.
 413              */
 414             &quot;expand&quot;,
 415
 416 <span id='Ext-panel-Panel-event-collapse'>            /**
 417 </span>             * @event collapse
 418              * Fires after this Panel hass collapsed.
 419              * @param {Ext.panel.Panel} p The Panel that has been collapsed.
 420              */
 421             &quot;collapse&quot;,
 422
 423 <span id='Ext-panel-Panel-event-titlechange'>            /**
 424 </span>             * @event titlechange
 425              * Fires after the Panel title has been set or changed.
 426              * @param {Ext.panel.Panel} p the Panel which has been resized.
 427              * @param {String} newTitle The new title.
 428              * @param {String} oldTitle The previous panel title.
 429              */
 430             'titlechange',
 431
 432 <span id='Ext-panel-Panel-event-iconchange'>            /**
 433 </span>             * @event iconchange
 434              * Fires after the Panel iconCls has been set or changed.
 435              * @param {Ext.panel.Panel} p the Panel which has been resized.
 436              * @param {String} newIconCls The new iconCls.
 437              * @param {String} oldIconCls The previous panel iconCls.
 438              */
 439             'iconchange'
 440         );
 441
 442         // Save state on these two events.
 443         this.addStateEvents('expand', 'collapse');
 444
 445         if (me.unstyled) {
 446             me.setUI('plain');
 447         }
 448
 449         if (me.frame) {
 450             me.setUI(me.ui + '-framed');
 451         }
 452
 453         // Backwards compatibility
 454         me.bridgeToolbars();
 455
 456         me.callParent();
 457         me.collapseDirection = me.collapseDirection || me.headerPosition || Ext.Component.DIRECTION_TOP;
 458     },
 459
 460     setBorder: function(border) {
 461         // var me     = this,
 462         //     method = (border === false || border === 0) ? 'addClsWithUI' : 'removeClsWithUI';
 463         //
 464         // me.callParent(arguments);
 465         //
 466         // if (me.collapsed) {
 467         //     me[method](me.collapsedCls + '-noborder');
 468         // }
 469         //
 470         // if (me.header) {
 471         //     me.header.setBorder(border);
 472         //     if (me.collapsed) {
 473         //         me.header[method](me.collapsedCls + '-noborder');
 474         //     }
 475         // }
 476
 477         this.callParent(arguments);
 478     },
 479
 480     beforeDestroy: function() {
 481         Ext.destroy(
 482             this.ghostPanel,
 483             this.dd
 484         );
 485         this.callParent();
 486     },
 487
 488     initAria: function() {
 489         this.callParent();
 490         this.initHeaderAria();
 491     },
 492
 493     initHeaderAria: function() {
 494         var me = this,
 495             el = me.el,
 496             header = me.header;
 497         if (el &amp;&amp; header) {
 498             el.dom.setAttribute('aria-labelledby', header.titleCmp.id);
 499         }
 500     },
 501
 502     getHeader: function() {
 503         return this.header;
 504     },
 505
 506 <span id='Ext-panel-Panel-method-setTitle'>    /**
 507 </span>     * Set a title for the panel's header. See {@link Ext.panel.Header#title}.
 508      * @param {String} newTitle
 509      */
 510     setTitle: function(newTitle) {
 511         var me = this,
 512         oldTitle = this.title;
 513
 514         me.title = newTitle;
 515         if (me.header) {
 516             me.header.setTitle(newTitle);
 517         } else {
 518             me.updateHeader();
 519         }
 520
 521         if (me.reExpander) {
 522             me.reExpander.setTitle(newTitle);
 523         }
 524         me.fireEvent('titlechange', me, newTitle, oldTitle);
 525     },
 526
 527 <span id='Ext-panel-Panel-method-setIconCls'>    /**
 528 </span>     * Set the iconCls for the panel's header. See {@link Ext.panel.Header#iconCls}. It will fire the
 529      * {@link #iconchange} event after completion.
 530      * @param {String} newIconCls The new CSS class name
 531      */
 532     setIconCls: function(newIconCls) {
 533         var me = this,
 534             oldIconCls = me.iconCls;
 535
 536         me.iconCls = newIconCls;
 537         var header = me.header;
 538         if (header) {
 539             header.setIconCls(newIconCls);
 540         }
 541         me.fireEvent('iconchange', me, newIconCls, oldIconCls);
 542     },
 543
 544     bridgeToolbars: function() {
 545         var me = this,
 546             docked = [],
 547             fbar,
 548             fbarDefaults,
 549             minButtonWidth = me.minButtonWidth;
 550
 551         function initToolbar (toolbar, pos, useButtonAlign) {
 552             if (Ext.isArray(toolbar)) {
 553                 toolbar = {
 554                     xtype: 'toolbar',
 555                     items: toolbar
 556                 };
 557             }
 558             else if (!toolbar.xtype) {
 559                 toolbar.xtype = 'toolbar';
 560             }
 561             toolbar.dock = pos;
 562             if (pos == 'left' || pos == 'right') {
 563                 toolbar.vertical = true;
 564             }
 565
 566             // Legacy support for buttonAlign (only used by buttons/fbar)
 567             if (useButtonAlign) {
 568                 toolbar.layout = Ext.applyIf(toolbar.layout || {}, {
 569                     // default to 'end' (right-aligned) if me.buttonAlign is undefined or invalid
 570                     pack: { left:'start', center:'center' }[me.buttonAlign] || 'end'
 571                 });
 572             }
 573             return toolbar;
 574         }
 575
 576         // Short-hand toolbars (tbar, bbar and fbar plus new lbar and rbar):
 577
 578 <span id='Ext-panel-Panel-cfg-buttonAlign'>        /**
 579 </span>         * @cfg {String} buttonAlign
 580          * The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to
 581          * 'right' for buttons/fbar, 'left' for other toolbar types).
 582          *
 583          * **NOTE:** The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you
 584          * would add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.
 585          */
 586
 587 <span id='Ext-panel-Panel-cfg-tbar'>        /**
 588 </span>         * @cfg {Object/Object[]} tbar
 589          * Convenience config. Short for 'Top Bar'.
 590          *
 591          *     tbar: [
 592          *       { xtype: 'button', text: 'Button 1' }
 593          *     ]
 594          *
 595          * is equivalent to
 596          *
 597          *     dockedItems: [{
 598          *         xtype: 'toolbar',
 599          *         dock: 'top',
 600          *         items: [
 601          *             { xtype: 'button', text: 'Button 1' }
 602          *         ]
 603          *     }]
 604          */
 605         if (me.tbar) {
 606             docked.push(initToolbar(me.tbar, 'top'));
 607             me.tbar = null;
 608         }
 609
 610 <span id='Ext-panel-Panel-cfg-bbar'>        /**
 611 </span>         * @cfg {Object/Object[]} bbar
 612          * Convenience config. Short for 'Bottom Bar'.
 613          *
 614          *     bbar: [
 615          *       { xtype: 'button', text: 'Button 1' }
 616          *     ]
 617          *
 618          * is equivalent to
 619          *
 620          *     dockedItems: [{
 621          *         xtype: 'toolbar',
 622          *         dock: 'bottom',
 623          *         items: [
 624          *             { xtype: 'button', text: 'Button 1' }
 625          *         ]
 626          *     }]
 627          */
 628         if (me.bbar) {
 629             docked.push(initToolbar(me.bbar, 'bottom'));
 630             me.bbar = null;
 631         }
 632
 633 <span id='Ext-panel-Panel-cfg-buttons'>        /**
 634 </span>         * @cfg {Object/Object[]} buttons
 635          * Convenience config used for adding buttons docked to the bottom of the panel. This is a
 636          * synonym for the {@link #fbar} config.
 637          *
 638          *     buttons: [
 639          *       { text: 'Button 1' }
 640          *     ]
 641          *
 642          * is equivalent to
 643          *
 644          *     dockedItems: [{
 645          *         xtype: 'toolbar',
 646          *         dock: 'bottom',
 647          *         ui: 'footer',
 648          *         defaults: {minWidth: {@link #minButtonWidth}},
 649          *         items: [
 650          *             { xtype: 'component', flex: 1 },
 651          *             { xtype: 'button', text: 'Button 1' }
 652          *         ]
 653          *     }]
 654          *
 655          * The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
 656          * each of the buttons in the buttons toolbar.
 657          */
 658         if (me.buttons) {
 659             me.fbar = me.buttons;
 660             me.buttons = null;
 661         }
 662
 663 <span id='Ext-panel-Panel-cfg-fbar'>        /**
 664 </span>         * @cfg {Object/Object[]} fbar
 665          * Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.
 666          *
 667          *     fbar: [
 668          *       { type: 'button', text: 'Button 1' }
 669          *     ]
 670          *
 671          * is equivalent to
 672          *
 673          *     dockedItems: [{
 674          *         xtype: 'toolbar',
 675          *         dock: 'bottom',
 676          *         ui: 'footer',
 677          *         defaults: {minWidth: {@link #minButtonWidth}},
 678          *         items: [
 679          *             { xtype: 'component', flex: 1 },
 680          *             { xtype: 'button', text: 'Button 1' }
 681          *         ]
 682          *     }]
 683          *
 684          * The {@link #minButtonWidth} is used as the default {@link Ext.button.Button#minWidth minWidth} for
 685          * each of the buttons in the fbar.
 686          */
 687         if (me.fbar) {
 688             fbar = initToolbar(me.fbar, 'bottom', true); // only we useButtonAlign
 689             fbar.ui = 'footer';
 690
 691             // Apply the minButtonWidth config to buttons in the toolbar
 692             if (minButtonWidth) {
 693                 fbarDefaults = fbar.defaults;
 694                 fbar.defaults = function(config) {
 695                     var defaults = fbarDefaults || {};
 696                     if ((!config.xtype || config.xtype === 'button' || (config.isComponent &amp;&amp; config.isXType('button'))) &amp;&amp;
 697                             !('minWidth' in defaults)) {
 698                         defaults = Ext.apply({minWidth: minButtonWidth}, defaults);
 699                     }
 700                     return defaults;
 701                 };
 702             }
 703
 704             docked.push(fbar);
 705             me.fbar = null;
 706         }
 707
 708 <span id='Ext-panel-Panel-cfg-lbar'>        /**
 709 </span>         * @cfg {Object/Object[]} lbar
 710          * Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).
 711          *
 712          *     lbar: [
 713          *       { xtype: 'button', text: 'Button 1' }
 714          *     ]
 715          *
 716          * is equivalent to
 717          *
 718          *     dockedItems: [{
 719          *         xtype: 'toolbar',
 720          *         dock: 'left',
 721          *         items: [
 722          *             { xtype: 'button', text: 'Button 1' }
 723          *         ]
 724          *     }]
 725          */
 726         if (me.lbar) {
 727             docked.push(initToolbar(me.lbar, 'left'));
 728             me.lbar = null;
 729         }
 730
 731 <span id='Ext-panel-Panel-cfg-rbar'>        /**
 732 </span>         * @cfg {Object/Object[]} rbar
 733          * Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).
 734          *
 735          *     rbar: [
 736          *       { xtype: 'button', text: 'Button 1' }
 737          *     ]
 738          *
 739          * is equivalent to
 740          *
 741          *     dockedItems: [{
 742          *         xtype: 'toolbar',
 743          *         dock: 'right',
 744          *         items: [
 745          *             { xtype: 'button', text: 'Button 1' }
 746          *         ]
 747          *     }]
 748          */
 749         if (me.rbar) {
 750             docked.push(initToolbar(me.rbar, 'right'));
 751             me.rbar = null;
 752         }
 753
 754         if (me.dockedItems) {
 755             if (!Ext.isArray(me.dockedItems)) {
 756                 me.dockedItems = [me.dockedItems];
 757             }
 758             me.dockedItems = me.dockedItems.concat(docked);
 759         } else {
 760             me.dockedItems = docked;
 761         }
 762     },
 763
 764 <span id='Ext-panel-Panel-method-initTools'>    /**
 765 </span>     * @private
 766      * Tools are a Panel-specific capabilty.
 767      * Panel uses initTools. Subclasses may contribute tools by implementing addTools.
 768      */
 769     initTools: function() {
 770         var me = this;
 771
 772         me.tools = me.tools ? Ext.Array.clone(me.tools) : [];
 773
 774         // Add a collapse tool unless configured to not show a collapse tool
 775         // or to not even show a header.
 776         if (me.collapsible &amp;&amp; !(me.hideCollapseTool || me.header === false)) {
 777             me.collapseDirection = me.collapseDirection || me.headerPosition || 'top';
 778             me.collapseTool = me.expandTool = me.createComponent({
 779                 xtype: 'tool',
 780                 type: 'collapse-' + me.collapseDirection,
 781                 expandType: me.getOppositeDirection(me.collapseDirection),
 782                 handler: me.toggleCollapse,
 783                 scope: me
 784             });
 785
 786             // Prepend collapse tool is configured to do so.
 787             if (me.collapseFirst) {
 788                 me.tools.unshift(me.collapseTool);
 789             }
 790         }
 791
 792         // Add subclass-specific tools.
 793         me.addTools();
 794
 795         // Make Panel closable.
 796         if (me.closable) {
 797             me.addClsWithUI('closable');
 798             me.addTool({
 799                 type: 'close',
 800                 handler: Ext.Function.bind(me.close, this, [])
 801             });
 802         }
 803
 804         // Append collapse tool if needed.
 805         if (me.collapseTool &amp;&amp; !me.collapseFirst) {
 806             me.tools.push(me.collapseTool);
 807         }
 808     },
 809
 810 <span id='Ext-panel-Panel-property-addTools'>    /**
 811 </span>     * @private
 812      * @template
 813      * Template method to be implemented in subclasses to add their tools after the collapsible tool.
 814      */
 815     addTools: Ext.emptyFn,
 816
 817 <span id='Ext-panel-Panel-method-close'>    /**
 818 </span>     * Closes the Panel. By default, this method, removes it from the DOM, {@link Ext.Component#destroy destroy}s the
 819      * Panel object and all its descendant Components. The {@link #beforeclose beforeclose} event is fired before the
 820      * close happens and will cancel the close action if it returns false.
 821      *
 822      * **Note:** This method is also affected by the {@link #closeAction} setting. For more explicit control use
 823      * {@link #destroy} and {@link #hide} methods.
 824      */
 825     close: function() {
 826         if (this.fireEvent('beforeclose', this) !== false) {
 827             this.doClose();
 828         }
 829     },
 830
 831     // private
 832     doClose: function() {
 833         this.fireEvent('close', this);
 834         this[this.closeAction]();
 835     },
 836
 837     onRender: function(ct, position) {
 838         var me = this,
 839             topContainer;
 840
 841         // Add class-specific header tools.
 842         // Panel adds collapsible and closable.
 843         me.initTools();
 844
 845         // Dock the header/title
 846         me.updateHeader();
 847
 848         // Call to super after adding the header, to prevent an unnecessary re-layout
 849         me.callParent(arguments);
 850     },
 851
 852     afterRender: function() {
 853         var me = this;
 854
 855         me.callParent(arguments);
 856
 857         // Instate the collapsed state after render. We need to wait for
 858         // this moment so that we have established at least some of our size (from our
 859         // configured dimensions or from content via the component layout)
 860         if (me.collapsed) {
 861             me.collapsed = false;
 862             me.collapse(null, false, true);
 863         }
 864     },
 865
 866 <span id='Ext-panel-Panel-method-updateHeader'>    /**
 867 </span>     * Create, hide, or show the header component as appropriate based on the current config.
 868      * @private
 869      * @param {Boolean} force True to force the header to be created
 870      */
 871     updateHeader: function(force) {
 872         var me = this,
 873             header = me.header,
 874             title = me.title,
 875             tools = me.tools;
 876
 877         if (!me.preventHeader &amp;&amp; (force || title || (tools &amp;&amp; tools.length))) {
 878             if (!header) {
 879                 header = me.header = Ext.create('Ext.panel.Header', {
 880                     title       : title,
 881                     orientation : (me.headerPosition == 'left' || me.headerPosition == 'right') ? 'vertical' : 'horizontal',
 882                     dock        : me.headerPosition || 'top',
 883                     textCls     : me.headerTextCls,
 884                     iconCls     : me.iconCls,
 885                     baseCls     : me.baseCls + '-header',
 886                     tools       : tools,
 887                     ui          : me.ui,
 888                     indicateDrag: me.draggable,
 889                     border      : me.border,
 890                     frame       : me.frame &amp;&amp; me.frameHeader,
 891                     ignoreParentFrame : me.frame || me.overlapHeader,
 892                     ignoreBorderManagement: me.frame || me.ignoreHeaderBorderManagement,
 893                     listeners   : me.collapsible &amp;&amp; me.titleCollapse ? {
 894                         click: me.toggleCollapse,
 895                         scope: me
 896                     } : null
 897                 });
 898                 me.addDocked(header, 0);
 899
 900                 // Reference the Header's tool array.
 901                 // Header injects named references.
 902                 me.tools = header.tools;
 903             }
 904             header.show();
 905             me.initHeaderAria();
 906         } else if (header) {
 907             header.hide();
 908         }
 909     },
 910
 911     // inherit docs
 912     setUI: function(ui) {
 913         var me = this;
 914
 915         me.callParent(arguments);
 916
 917         if (me.header) {
 918             me.header.setUI(ui);
 919         }
 920     },
 921
 922     // private
 923     getContentTarget: function() {
 924         return this.body;
 925     },
 926
 927     getTargetEl: function() {
 928         return this.body || this.frameBody || this.el;
 929     },
 930
 931     // the overrides below allow for collapsed regions inside the border layout to be hidden
 932
 933     // inherit docs
 934     isVisible: function(deep){
 935         var me = this;
 936         if (me.collapsed &amp;&amp; me.placeholder) {
 937             return me.placeholder.isVisible(deep);
 938         }
 939         return me.callParent(arguments);
 940     },
 941
 942     // inherit docs
 943     onHide: function(){
 944         var me = this;
 945         if (me.collapsed &amp;&amp; me.placeholder) {
 946             me.placeholder.hide();
 947         } else {
 948             me.callParent(arguments);
 949         }
 950     },
 951
 952     // inherit docs
 953     onShow: function(){
 954         var me = this;
 955         if (me.collapsed &amp;&amp; me.placeholder) {
 956             // force hidden back to true, since this gets set by the layout
 957             me.hidden = true;
 958             me.placeholder.show();
 959         } else {
 960             me.callParent(arguments);
 961         }
 962     },
 963
 964     addTool: function(tool) {
 965         var me = this,
 966             header = me.header;
 967
 968         if (Ext.isArray(tool)) {
 969             Ext.each(tool, me.addTool, me);
 970             return;
 971         }
 972         me.tools.push(tool);
 973         if (header) {
 974             header.addTool(tool);
 975         }
 976         me.updateHeader();
 977     },
 978
 979     getOppositeDirection: function(d) {
 980         var c = Ext.Component;
 981         switch (d) {
 982             case c.DIRECTION_TOP:
 983                 return c.DIRECTION_BOTTOM;
 984             case c.DIRECTION_RIGHT:
 985                 return c.DIRECTION_LEFT;
 986             case c.DIRECTION_BOTTOM:
 987                 return c.DIRECTION_TOP;
 988             case c.DIRECTION_LEFT:
 989                 return c.DIRECTION_RIGHT;
 990         }
 991     },
 992
 993 <span id='Ext-panel-Panel-method-collapse'>    /**
 994 </span>     * Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which
 995      * the collapse takes place will remain visible. Fires the {@link #beforecollapse} event which will cancel the
 996      * collapse action if it returns false.
 997      *
 998      * @param {String} direction . The direction to collapse towards. Must be one of
 999      *
1000      *   - Ext.Component.DIRECTION_TOP
1001      *   - Ext.Component.DIRECTION_RIGHT
1002      *   - Ext.Component.DIRECTION_BOTTOM
1003      *   - Ext.Component.DIRECTION_LEFT
1004      *
1005      * @param {Boolean} [animate] True to animate the transition, else false (defaults to the value of the
1006      * {@link #animCollapse} panel config)
1007      * @return {Ext.panel.Panel} this
1008      */
1009     collapse: function(direction, animate, /* private - passed if called at render time */ internal) {
1010         var me = this,
1011             c = Ext.Component,
1012             height = me.getHeight(),
1013             width = me.getWidth(),
1014             frameInfo,
1015             newSize = 0,
1016             dockedItems = me.dockedItems.items,
1017             dockedItemCount = dockedItems.length,
1018             i = 0,
1019             comp,
1020             pos,
1021             anim = {
1022                 from: {
1023                     height: height,
1024                     width: width
1025                 },
1026                 to: {
1027                     height: height,
1028                     width: width
1029                 },
1030                 listeners: {
1031                     afteranimate: me.afterCollapse,
1032                     scope: me
1033                 },
1034                 duration: Ext.Number.from(animate, Ext.fx.Anim.prototype.duration)
1035             },
1036             reExpander,
1037             reExpanderOrientation,
1038             reExpanderDock,
1039             getDimension,
1040             collapseDimension;
1041
1042         if (!direction) {
1043             direction = me.collapseDirection;
1044         }
1045
1046         // If internal (Called because of initial collapsed state), then no animation, and no events.
1047         if (internal) {
1048             animate = false;
1049         } else if (me.collapsed || me.fireEvent('beforecollapse', me, direction, animate) === false) {
1050             return false;
1051         }
1052
1053         reExpanderDock = direction;
1054         me.expandDirection = me.getOppositeDirection(direction);
1055
1056         // Track docked items which we hide during collapsed state
1057         me.hiddenDocked = [];
1058
1059         switch (direction) {
1060             case c.DIRECTION_TOP:
1061             case c.DIRECTION_BOTTOM:
1062                 reExpanderOrientation = 'horizontal';
1063                 collapseDimension = 'height';
1064                 getDimension = 'getHeight';
1065
1066                 // Attempt to find a reExpander Component (docked in a horizontal orientation)
1067                 // Also, collect all other docked items which we must hide after collapse.
1068                 for (; i &lt; dockedItemCount; i++) {
1069                     comp = dockedItems[i];
1070                     if (comp.isVisible()) {
1071                         if (comp.isXType('header', true) &amp;&amp; (!comp.dock || comp.dock == 'top' || comp.dock == 'bottom')) {
1072                             reExpander = comp;
1073                         } else {
1074                             me.hiddenDocked.push(comp);
1075                         }
1076                     } else if (comp === me.reExpander) {
1077                         reExpander = comp;
1078                     }
1079                 }
1080
1081                 if (direction == Ext.Component.DIRECTION_BOTTOM) {
1082                     pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
1083                     anim.from.top = pos;
1084                 }
1085                 break;
1086
1087             case c.DIRECTION_LEFT:
1088             case c.DIRECTION_RIGHT:
1089                 reExpanderOrientation = 'vertical';
1090                 collapseDimension = 'width';
1091                 getDimension = 'getWidth';
1092
1093                 // Attempt to find a reExpander Component (docked in a vecrtical orientation)
1094                 // Also, collect all other docked items which we must hide after collapse.
1095                 for (; i &lt; dockedItemCount; i++) {
1096                     comp = dockedItems[i];
1097                     if (comp.isVisible()) {
1098                         if (comp.isHeader &amp;&amp; (comp.dock == 'left' || comp.dock == 'right')) {
1099                             reExpander = comp;
1100                         } else {
1101                             me.hiddenDocked.push(comp);
1102                         }
1103                     } else if (comp === me.reExpander) {
1104                         reExpander = comp;
1105                     }
1106                 }
1107
1108                 if (direction == Ext.Component.DIRECTION_RIGHT) {
1109                     pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
1110                     anim.from.left = pos;
1111                 }
1112                 break;
1113
1114             default:
1115                 throw('Panel collapse must be passed a valid Component collapse direction');
1116         }
1117
1118         // Disable toggle tool during animated collapse
1119         if (animate &amp;&amp; me.collapseTool) {
1120             me.collapseTool.disable();
1121         }
1122
1123         // Add the collapsed class now, so that collapsed CSS rules are applied before measurements are taken.
1124         me.addClsWithUI(me.collapsedCls);
1125         // if (me.border === false) {
1126         //     me.addClsWithUI(me.collapsedCls + '-noborder');
1127         // }
1128
1129         // We found a header: Measure it to find the collapse-to size.
1130         if (reExpander &amp;&amp; reExpander.rendered) {
1131
1132             //we must add the collapsed cls to the header and then remove to get the proper height
1133             reExpander.addClsWithUI(me.collapsedCls);
1134             reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
1135             if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
1136                 reExpander.addClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
1137             }
1138
1139             frameInfo = reExpander.getFrameInfo();
1140
1141             //get the size
1142             newSize = reExpander[getDimension]() + (frameInfo ? frameInfo[direction] : 0);
1143
1144             //and remove
1145             reExpander.removeClsWithUI(me.collapsedCls);
1146             reExpander.removeClsWithUI(me.collapsedCls + '-' + reExpander.dock);
1147             if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
1148                 reExpander.removeClsWithUI(me.collapsedCls + '-border-' + reExpander.dock);
1149             }
1150         }
1151         // No header: Render and insert a temporary one, and then measure it.
1152         else {
1153             reExpander = {
1154                 hideMode: 'offsets',
1155                 temporary: true,
1156                 title: me.title,
1157                 orientation: reExpanderOrientation,
1158                 dock: reExpanderDock,
1159                 textCls: me.headerTextCls,
1160                 iconCls: me.iconCls,
1161                 baseCls: me.baseCls + '-header',
1162                 ui: me.ui,
1163                 frame: me.frame &amp;&amp; me.frameHeader,
1164                 ignoreParentFrame: me.frame || me.overlapHeader,
1165                 indicateDrag: me.draggable,
1166                 cls: me.baseCls + '-collapsed-placeholder ' + ' ' + Ext.baseCSSPrefix + 'docked ' + me.baseCls + '-' + me.ui + '-collapsed',
1167                 renderTo: me.el
1168             };
1169             if (!me.hideCollapseTool) {
1170                 reExpander[(reExpander.orientation == 'horizontal') ? 'tools' : 'items'] = [{
1171                     xtype: 'tool',
1172                     type: 'expand-' + me.expandDirection,
1173                     handler: me.toggleCollapse,
1174                     scope: me
1175                 }];
1176             }
1177
1178             // Capture the size of the re-expander.
1179             // For vertical headers in IE6 and IE7, this will be sized by a CSS rule in _panel.scss
1180             reExpander = me.reExpander = Ext.create('Ext.panel.Header', reExpander);
1181             newSize = reExpander[getDimension]() + ((reExpander.frame) ? reExpander.frameSize[direction] : 0);
1182             reExpander.hide();
1183
1184             // Insert the new docked item
1185             me.insertDocked(0, reExpander);
1186         }
1187
1188         me.reExpander = reExpander;
1189         me.reExpander.addClsWithUI(me.collapsedCls);
1190         me.reExpander.addClsWithUI(me.collapsedCls + '-' + reExpander.dock);
1191         if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
1192             me.reExpander.addClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
1193         }
1194
1195         // If collapsing right or down, we'll be also animating the left or top.
1196         if (direction == Ext.Component.DIRECTION_RIGHT) {
1197             anim.to.left = pos + (width - newSize);
1198         } else if (direction == Ext.Component.DIRECTION_BOTTOM) {
1199             anim.to.top = pos + (height - newSize);
1200         }
1201
1202         // Animate to the new size
1203         anim.to[collapseDimension] = newSize;
1204
1205         // When we collapse a panel, the panel is in control of one dimension (depending on
1206         // collapse direction) and sets that on the component. We must restore the user's
1207         // original value (including non-existance) when we expand. Using this technique, we
1208         // mimic setCalculatedSize for the dimension we do not control and setSize for the
1209         // one we do (only while collapsed).
1210         if (!me.collapseMemento) {
1211             me.collapseMemento = new Ext.util.Memento(me);
1212         }
1213         me.collapseMemento.capture(['width', 'height', 'minWidth', 'minHeight', 'layoutManagedHeight', 'layoutManagedWidth']);
1214
1215         // Remove any flex config before we attempt to collapse.
1216         me.savedFlex = me.flex;
1217         me.minWidth = 0;
1218         me.minHeight = 0;
1219         delete me.flex;
1220         me.suspendLayout = true;
1221
1222         if (animate) {
1223             me.animate(anim);
1224         } else {
1225             me.setSize(anim.to.width, anim.to.height);
1226             if (Ext.isDefined(anim.to.left) || Ext.isDefined(anim.to.top)) {
1227                 me.setPosition(anim.to.left, anim.to.top);
1228             }
1229             me.afterCollapse(false, internal);
1230         }
1231         return me;
1232     },
1233
1234     afterCollapse: function(animated, internal) {
1235         var me = this,
1236             i = 0,
1237             l = me.hiddenDocked.length;
1238
1239         me.collapseMemento.restore(['minWidth', 'minHeight']);
1240
1241         // Now we can restore the dimension we don't control to its original state
1242         // Leave the value in the memento so that it can be correctly restored
1243         // if it is set by animation.
1244         if (Ext.Component.VERTICAL_DIRECTION_Re.test(me.expandDirection)) {
1245             me.layoutManagedHeight = 2;
1246             me.collapseMemento.restore('width', false);
1247         } else {
1248             me.layoutManagedWidth = 2;
1249             me.collapseMemento.restore('height', false);
1250         }
1251
1252         // We must hide the body, otherwise it overlays docked items which come before
1253         // it in the DOM order. Collapsing its dimension won't work - padding and borders keep a size.
1254         me.saveScrollTop = me.body.dom.scrollTop;
1255         me.body.setStyle('display', 'none');
1256
1257         for (; i &lt; l; i++) {
1258             me.hiddenDocked[i].hide();
1259         }
1260         if (me.reExpander) {
1261             me.reExpander.updateFrame();
1262             me.reExpander.show();
1263         }
1264         me.collapsed = true;
1265         me.suspendLayout = false;
1266
1267         if (!internal) {
1268             if (me.ownerCt) {
1269                 // Because Component layouts only inform upstream containers if they have changed size,
1270                 // explicitly lay out the container now, because the lastComponentsize will have been set by the non-animated setCalculatedSize.
1271                 if (animated) {
1272                     me.ownerCt.layout.layout();
1273                 }
1274             } else if (me.reExpander.temporary) {
1275                 me.doComponentLayout();
1276             }
1277         }
1278
1279         if (me.resizer) {
1280             me.resizer.disable();
1281         }
1282
1283         // If me Panel was configured with a collapse tool in its header, flip it's type
1284         if (me.collapseTool) {
1285             me.collapseTool.setType('expand-' + me.expandDirection);
1286         }
1287         if (!internal) {
1288             me.fireEvent('collapse', me);
1289         }
1290
1291         // Re-enable the toggle tool after an animated collapse
1292         if (animated &amp;&amp; me.collapseTool) {
1293             me.collapseTool.enable();
1294         }
1295     },
1296
1297 <span id='Ext-panel-Panel-method-expand'>    /**
1298 </span>     * Expands the panel body so that it becomes visible. Fires the {@link #beforeexpand} event which will cancel the
1299      * expand action if it returns false.
1300      * @param {Boolean} [animate] True to animate the transition, else false (defaults to the value of the
1301      * {@link #animCollapse} panel config)
1302      * @return {Ext.panel.Panel} this
1303      */
1304     expand: function(animate) {
1305         var me = this;
1306         if (!me.collapsed || me.fireEvent('beforeexpand', me, animate) === false) {
1307             return false;
1308         }
1309
1310         var i = 0,
1311             l = me.hiddenDocked.length,
1312             direction = me.expandDirection,
1313             height = me.getHeight(),
1314             width = me.getWidth(),
1315             pos, anim;
1316
1317         // Disable toggle tool during animated expand
1318         if (animate &amp;&amp; me.collapseTool) {
1319             me.collapseTool.disable();
1320         }
1321
1322         // Show any docked items that we hid on collapse
1323         // And hide the injected reExpander Header
1324         for (; i &lt; l; i++) {
1325             me.hiddenDocked[i].hidden = false;
1326             me.hiddenDocked[i].el.show();
1327         }
1328         if (me.reExpander) {
1329             if (me.reExpander.temporary) {
1330                 me.reExpander.hide();
1331             } else {
1332                 me.reExpander.removeClsWithUI(me.collapsedCls);
1333                 me.reExpander.removeClsWithUI(me.collapsedCls + '-' + me.reExpander.dock);
1334                 if (me.border &amp;&amp; (!me.frame || (me.frame &amp;&amp; Ext.supports.CSS3BorderRadius))) {
1335                     me.reExpander.removeClsWithUI(me.collapsedCls + '-border-' + me.reExpander.dock);
1336                 }
1337                 me.reExpander.updateFrame();
1338             }
1339         }
1340
1341         // If me Panel was configured with a collapse tool in its header, flip it's type
1342         if (me.collapseTool) {
1343             me.collapseTool.setType('collapse-' + me.collapseDirection);
1344         }
1345
1346         // Restore body display and scroll position
1347         me.body.setStyle('display', '');
1348         me.body.dom.scrollTop = me.saveScrollTop;
1349
1350         // Unset the flag before the potential call to calculateChildBox to calculate our newly flexed size
1351         me.collapsed = false;
1352
1353         // Remove any collapsed styling before any animation begins
1354         me.removeClsWithUI(me.collapsedCls);
1355         // if (me.border === false) {
1356         //     me.removeClsWithUI(me.collapsedCls + '-noborder');
1357         // }
1358
1359         anim = {
1360             to: {
1361             },
1362             from: {
1363                 height: height,
1364                 width: width
1365             },
1366             listeners: {
1367                 afteranimate: me.afterExpand,
1368                 scope: me
1369             }
1370         };
1371
1372         if ((direction == Ext.Component.DIRECTION_TOP) || (direction == Ext.Component.DIRECTION_BOTTOM)) {
1373
1374             // Restore the collapsed dimension.
1375             // Leave it in the memento, so that the final restoreAll can overwrite anything that animation does.
1376             me.collapseMemento.restore('height', false);
1377
1378             // If autoHeight, measure the height now we have shown the body element.
1379             if (me.height === undefined) {
1380                 me.setCalculatedSize(me.width, null);
1381                 anim.to.height = me.getHeight();
1382
1383                 // Must size back down to collapsed for the animation.
1384                 me.setCalculatedSize(me.width, anim.from.height);
1385             }
1386             // If we were flexed, then we can't just restore to the saved size.
1387             // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
1388             else if (me.savedFlex) {
1389                 me.flex = me.savedFlex;
1390                 anim.to.height = me.ownerCt.layout.calculateChildBox(me).height;
1391                 delete me.flex;
1392             }
1393             // Else, restore to saved height
1394             else {
1395                 anim.to.height = me.height;
1396             }
1397
1398             // top needs animating upwards
1399             if (direction == Ext.Component.DIRECTION_TOP) {
1400                 pos = me.getPosition()[1] - Ext.fly(me.el.dom.offsetParent).getRegion().top;
1401                 anim.from.top = pos;
1402                 anim.to.top = pos - (anim.to.height - height);
1403             }
1404         } else if ((direction == Ext.Component.DIRECTION_LEFT) || (direction == Ext.Component.DIRECTION_RIGHT)) {
1405
1406             // Restore the collapsed dimension.
1407             // Leave it in the memento, so that the final restoreAll can overwrite anything that animation does.
1408             me.collapseMemento.restore('width', false);
1409
1410             // If autoWidth, measure the width now we have shown the body element.
1411             if (me.width === undefined) {
1412                 me.setCalculatedSize(null, me.height);
1413                 anim.to.width = me.getWidth();
1414
1415                 // Must size back down to collapsed for the animation.
1416                 me.setCalculatedSize(anim.from.width, me.height);
1417             }
1418             // If we were flexed, then we can't just restore to the saved size.
1419             // We must restore to the currently correct, flexed size, so we much ask the Box layout what that is.
1420             else if (me.savedFlex) {
1421                 me.flex = me.savedFlex;
1422                 anim.to.width = me.ownerCt.layout.calculateChildBox(me).width;
1423                 delete me.flex;
1424             }
1425             // Else, restore to saved width
1426             else {
1427                 anim.to.width = me.width;
1428             }
1429
1430             // left needs animating leftwards
1431             if (direction == Ext.Component.DIRECTION_LEFT) {
1432                 pos = me.getPosition()[0] - Ext.fly(me.el.dom.offsetParent).getRegion().left;
1433                 anim.from.left = pos;
1434                 anim.to.left = pos - (anim.to.width - width);
1435             }
1436         }
1437
1438         if (animate) {
1439             me.animate(anim);
1440         } else {
1441             me.setCalculatedSize(anim.to.width, anim.to.height);
1442             if (anim.to.x) {
1443                 me.setLeft(anim.to.x);
1444             }
1445             if (anim.to.y) {
1446                 me.setTop(anim.to.y);
1447             }
1448             me.afterExpand(false);
1449         }
1450
1451         return me;
1452     },
1453
1454     afterExpand: function(animated) {
1455         var me = this;
1456
1457         // Restored to a calculated flex. Delete the set width and height properties so that flex works from now on.
1458         if (me.savedFlex) {
1459             me.flex = me.savedFlex;
1460             delete me.savedFlex;
1461             delete me.width;
1462             delete me.height;
1463         }
1464
1465         // Restore width/height and dimension management flags to original values
1466         if (me.collapseMemento) {
1467             me.collapseMemento.restoreAll();
1468         }
1469
1470         if (animated &amp;&amp; me.ownerCt) {
1471             // IE 6 has an intermittent repaint issue in this case so give
1472             // it a little extra time to catch up before laying out.
1473             Ext.defer(me.ownerCt.doLayout, Ext.isIE6 ? 1 : 0, me);
1474         }
1475
1476         if (me.resizer) {
1477             me.resizer.enable();
1478         }
1479
1480         me.fireEvent('expand', me);
1481
1482         // Re-enable the toggle tool after an animated expand
1483         if (animated &amp;&amp; me.collapseTool) {
1484             me.collapseTool.enable();
1485         }
1486     },
1487
1488 <span id='Ext-panel-Panel-method-toggleCollapse'>    /**
1489 </span>     * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel.
1490      * @return {Ext.panel.Panel} this
1491      */
1492     toggleCollapse: function() {
1493         if (this.collapsed) {
1494             this.expand(this.animCollapse);
1495         } else {
1496             this.collapse(this.collapseDirection, this.animCollapse);
1497         }
1498         return this;
1499     },
1500
1501     // private
1502     getKeyMap : function(){
1503         if(!this.keyMap){
1504             this.keyMap = Ext.create('Ext.util.KeyMap', this.el, this.keys);
1505         }
1506         return this.keyMap;
1507     },
1508
1509     // private
1510     initDraggable : function(){
1511 <span id='Ext-panel-Panel-property-dd'>        /**
1512 </span>         * @property {Ext.dd.DragSource} dd
1513          * If this Panel is configured {@link #draggable}, this property will contain an instance of {@link
1514          * Ext.dd.DragSource} which handles dragging the Panel.
1515          *
1516          * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource} in order to
1517          * supply behaviour for each stage of the drag/drop process. See {@link #draggable}.
1518          */
1519         this.dd = Ext.create('Ext.panel.DD', this, Ext.isBoolean(this.draggable) ? null : this.draggable);
1520     },
1521
1522     // private - helper function for ghost
1523     ghostTools : function() {
1524         var tools = [],
1525             headerTools = this.header.query('tool[hidden=false]');
1526
1527         if (headerTools.length) {
1528             Ext.each(headerTools, function(tool) {
1529                 // Some tools can be full components, and copying them into the ghost
1530                 // actually removes them from the owning panel. You could also potentially
1531                 // end up with duplicate DOM ids as well. To avoid any issues we just make
1532                 // a simple bare-minimum clone of each tool for ghosting purposes.
1533                 tools.push({
1534                     type: tool.type
1535                 });
1536             });
1537         } else {
1538             tools = [{
1539                 type: 'placeholder'
1540             }];
1541         }
1542         return tools;
1543     },
1544
1545     // private - used for dragging
1546     ghost: function(cls) {
1547         var me = this,
1548             ghostPanel = me.ghostPanel,
1549             box = me.getBox(),
1550             header;
1551
1552         if (!ghostPanel) {
1553             ghostPanel = Ext.create('Ext.panel.Panel', {
1554                 renderTo: me.floating ? me.el.dom.parentNode : document.body,
1555                 floating: {
1556                     shadow: false
1557                 },
1558                 frame: Ext.supports.CSS3BorderRadius ? me.frame : false,
1559                 overlapHeader: me.overlapHeader,
1560                 headerPosition: me.headerPosition,
1561                 baseCls: me.baseCls,
1562                 cls: me.baseCls + '-ghost ' + (cls ||'')
1563             });
1564             me.ghostPanel = ghostPanel;
1565         }
1566         ghostPanel.floatParent = me.floatParent;
1567         if (me.floating) {
1568             ghostPanel.setZIndex(Ext.Number.from(me.el.getStyle('zIndex'), 0));
1569         } else {
1570             ghostPanel.toFront();
1571         }
1572         header = ghostPanel.header;
1573         // restore options
1574         if (header) {
1575             header.suspendLayout = true;
1576             Ext.Array.forEach(header.query('tool'), function(tool){
1577                 header.remove(tool);
1578             });
1579             header.suspendLayout = false;
1580         }
1581         ghostPanel.addTool(me.ghostTools());
1582         ghostPanel.setTitle(me.title);
1583         ghostPanel.setIconCls(me.iconCls);
1584
1585         ghostPanel.el.show();
1586         ghostPanel.setPosition(box.x, box.y);
1587         ghostPanel.setSize(box.width, box.height);
1588         me.el.hide();
1589         if (me.floatingItems) {
1590             me.floatingItems.hide();
1591         }
1592         return ghostPanel;
1593     },
1594
1595     // private
1596     unghost: function(show, matchPosition) {
1597         var me = this;
1598         if (!me.ghostPanel) {
1599             return;
1600         }
1601         if (show !== false) {
1602             me.el.show();
1603             if (matchPosition !== false) {
1604                 me.setPosition(me.ghostPanel.getPosition());
1605             }
1606             if (me.floatingItems) {
1607                 me.floatingItems.show();
1608             }
1609             Ext.defer(me.focus, 10, me);
1610         }
1611         me.ghostPanel.el.hide();
1612     },
1613
1614     initResizable: function(resizable) {
1615         if (this.collapsed) {
1616             resizable.disabled = true;
1617         }
1618         this.callParent([resizable]);
1619     }
1620 }, function(){
1621     this.prototype.animCollapse = Ext.enableFx;
1622 });
1623 </pre>
1624 </body>
1625 </html>