source/widgets/Panel.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.Panel\r
  11  * @extends Ext.Container\r
  12  * Panel is a container that has specific functionality and structural components that make it the perfect building\r
  13  * block for application-oriented user interfaces. The Panel contains bottom and top toolbars, along with separate\r
  14  * header, footer and body sections.  It also provides built-in expandable and collapsible behavior, along with a\r
  15  * variety of prebuilt tool buttons that can be wired up to provide other customized behavior.  Panels can be easily\r
  16  * dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.\r
  17  * @constructor\r
  18  * @param {Object} config The config object\r
  19  */\r
  20 Ext.Panel = Ext.extend(Ext.Container, {\r
  21     /**\r
  22      * The Panel's header {@link Ext.Element Element}. Read-only.\r
  23      * <p>This Element is used to house the {@link #title} and {@link #tools}</p>\r
  24      * @type Ext.Element\r
  25      * @property header\r
  26      */\r
  27     /**\r
  28      * The Panel's body {@link Ext.Element Element} which may be used to contain HTML content.\r
  29      * The content may be specified in the {@link #html} config, or it may be loaded using the\r
  30      * {@link autoLoad} config, or through the Panel's {@link #getUpdater Updater}. Read-only.\r
  31      * <p>If this is used to load visible HTML elements in either way, then\r
  32      * the Panel may not be used as a Layout for hosting nested Panels.</p>\r
  33      * <p>If this Panel is intended to be used as the host of a Layout (See {@link #layout}\r
  34      * then the body Element must not be loaded or changed - it is under the control\r
  35      * of the Panel's Layout.\r
  36      * @type Ext.Element\r
  37      * @property body\r
  38      */\r
  39     /**\r
  40      * @cfg {Object} bodyCfg\r
  41      * <p>A {@link Ext.DomHelper DomHelper} configuration object specifying the element structure\r
  42      * of this Panel's {@link #body} Element.</p>\r
  43      * <p>This may be used to force the body Element to use a different form of markup than\r
  44      * is created automatically. An example of this might be to create a child Panel containing\r
  45      * custom content, such as a header, or forcing centering of all Panel\r
  46      * content by having the body be a &lt;center&gt; element:</p><code><pre>\r
  47 new Ext.Panel({\r
  48     title: 'New Message',\r
  49     collapsible: true,\r
  50     renderTo: Ext.getBody(),\r
  51     width: 400,\r
  52     bodyCfg: {\r
  53         tag: 'center',\r
  54         cls: 'x-panel-body'\r
  55     },\r
  56     items: [{\r
  57         border: false,\r
  58         header: false,\r
  59         bodyCfg: {tag: 'h2', html: 'Message'}\r
  60     }, {\r
  61         xtype: 'textarea',\r
  62         style: {\r
  63             width: '95%',\r
  64             marginBottom: '10px'\r
  65         }\r
  66     },\r
  67         new Ext.Button({\r
  68             text: 'Send',\r
  69             minWidth: '100',\r
  70             style: {\r
  71                 marginBottom: '10px'\r
  72             }\r
  73         })\r
  74     ]\r
  75 });</pre></code>\r
  76      */\r
  77     /**\r
  78      * The Panel's footer {@link Ext.Element Element}. Read-only.\r
  79      * <p>This Element is used to house the Panel's {@link #buttons}.</p>\r
  80      * @type Ext.Element\r
  81      * @property footer\r
  82      */\r
  83     /**\r
  84      * @cfg {Mixed} applyTo\r
  85      * The id of the node, a DOM node or an existing Element corresponding to a DIV that is already present in\r
  86      * the document that specifies some panel-specific structural markup.  When applyTo is used, constituent parts of\r
  87      * the panel can be specified by CSS class name within the main element, and the panel will automatically create those\r
  88      * components from that markup. Any required components not specified in the markup will be autogenerated if necessary.\r
  89      * The following class names are supported (baseCls will be replaced by {@link #baseCls}):\r
  90      * <ul><li>baseCls + '-header'</li>\r
  91      * <li>baseCls + '-header-text'</li>\r
  92      * <li>baseCls + '-bwrap'</li>\r
  93      * <li>baseCls + '-tbar'</li>\r
  94      * <li>baseCls + '-body'</li>\r
  95      * <li>baseCls + '-bbar'</li>\r
  96      * <li>baseCls + '-footer'</li></ul>\r
  97      * Using this config, a call to render() is not required.  If applyTo is specified, any value passed for\r
  98      * {@link #renderTo} will be ignored and the target element's parent node will automatically be used as the panel's container.\r
  99      */\r
 100     /**\r
 101      * @cfg {Object/Array} tbar\r
 102      * The top toolbar of the panel. This can be either an {@link Ext.Toolbar} object or an array of\r
 103      * buttons/button configs to be added to the toolbar.  Note that this is not available as a property after render.\r
 104      * To access the top toolbar after render, use {@link #getTopToolbar}.\r
 105      */\r
 106     /**\r
 107      * @cfg {Object/Array} bbar\r
 108      * The bottom toolbar of the panel. This can be either an {@link Ext.Toolbar} object or an array of\r
 109      * buttons/button configs to be added to the toolbar.  Note that this is not available as a property after render.\r
 110      * To access the bottom toolbar after render, use {@link #getBottomToolbar}.\r
 111      */\r
 112     /**\r
 113      * @cfg {Boolean} header\r
 114      * True to create the header element explicitly, false to skip creating it.  By default, when header is not\r
 115      * specified, if a {@link #title} is set the header will be created automatically, otherwise it will not.  If\r
 116      * a title is set but header is explicitly set to false, the header will not be rendered.\r
 117      */\r
 118     /**\r
 119      * @cfg {Boolean} footer\r
 120      * True to create the footer element explicitly, false to skip creating it.  By default, when footer is not\r
 121      * specified, if one or more buttons have been added to the panel the footer will be created automatically,\r
 122      * otherwise it will not.\r
 123      */\r
 124     /**\r
 125      * @cfg {String} title\r
 126      * The title text to display in the panel header (defaults to '').  When a title is specified the header\r
 127      * element will automatically be created and displayed unless {@link #header} is explicitly set to false.  If\r
 128      * you don't want to specify a title at config time, but you may want one later, you must either specify a\r
 129      * non-empty title (a blank space ' ' will do) or header:true so that the container element will get created.\r
 130      */\r
 131     /**\r
 132      * @cfg {Array} buttons\r
 133      * An array of {@link Ext.Button}s or {@link Ext.Button} configs used to add buttons to the footer of this panel.\r
 134      */\r
 135     /**\r
 136      * @cfg {Object/String/Function} autoLoad\r
 137      * A valid url spec according to the Updater {@link Ext.Updater#update} method.\r
 138      * If autoLoad is not null, the panel will attempt to load its contents\r
 139      * immediately upon render.<p>\r
 140      * The URL will become the default URL for this panel's {@link #body} element,\r
 141      * so it may be {@link Ext.Element#refresh refresh}ed at any time.</p>\r
 142      */\r
 143     /**\r
 144      * @cfg {Boolean} frame\r
 145      * True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).\r
 146      */\r
 147     /**\r
 148      * @cfg {Boolean} border\r
 149      * True to display the borders of the panel's body element, false to hide them (defaults to true).  By default,\r
 150      * the border is a 2px wide inset border, but this can be further altered by setting {@link #bodyBorder} to false.\r
 151      */\r
 152     /**\r
 153      * @cfg {Boolean} bodyBorder\r
 154      * True to display an interior border on the body element of the panel, false to hide it (defaults to true).\r
 155      * This only applies when {@link #border} == true.  If border == true and bodyBorder == false, the border will display\r
 156      * as a 1px wide inset border, giving the entire body element an inset appearance.\r
 157      */\r
 158     /**\r
 159      * @cfg {String/Object/Function} bodyStyle\r
 160      * Custom CSS styles to be applied to the body element in the format expected by {@link Ext.Element#applyStyles}\r
 161      * (defaults to null).\r
 162      */\r
 163     /**\r
 164      * @cfg {String} iconCls\r
 165      * A CSS class that will provide a background image to be used as the header icon (defaults to '').  An example\r
 166      * custom icon class would be something like: .my-icon { background: url(../images/my-icon.gif) 0 6px no-repeat !important;}\r
 167      */\r
 168     /**\r
 169      * @cfg {Boolean} collapsible\r
 170      * True to make the panel collapsible and have the expand/collapse toggle button automatically rendered into\r
 171      * the header tool button area, false to keep the panel statically sized with no button (defaults to false).\r
 172      */\r
 173     /**\r
 174      * @cfg {Array} tools\r
 175      * An array of tool button configs to be added to the header tool area. When rendered, each tool is\r
 176      * stored as an {@link Ext.Element Element} referenced by a public property called <tt><b></b>tools.<i>&lt;tool-type&gt;</i></tt>\r
 177      * <p>Each tool config may contain the following properties:\r
 178      * <div class="mdetail-params"><ul>\r
 179      * <li><b>id</b> : String<div class="sub-desc"><b>Required.</b> The type\r
 180      * of tool to create. Values may be<ul>\r
 181      * <li><tt>toggle</tt> (Created by default when {@link #collapsible} is <tt>true</tt>)</li>\r
 182      * <li><tt>close</tt></li>\r
 183      * <li><tt>minimize</tt></li>\r
 184      * <li><tt>maximize</tt></li>\r
 185      * <li><tt>restore</tt></li>\r
 186      * <li><tt>gear</tt></li>\r
 187      * <li><tt>pin</tt></li>\r
 188      * <li><tt>unpin</tt></li>\r
 189      * <li><tt>right</tt></li>\r
 190      * <li><tt>left</tt></li>\r
 191      * <li><tt>up</tt></li>\r
 192      * <li><tt>down</tt></li>\r
 193      * <li><tt>refresh</tt></li>\r
 194      * <li><tt>minus</tt></li>\r
 195      * <li><tt>plus</tt></li>\r
 196      * <li><tt>help</tt></li>\r
 197      * <li><tt>search</tt></li>\r
 198      * <li><tt>save</tt></li>\r
 199      * <li><tt>print</tt></li>\r
 200      * </ul></div></li>\r
 201      * <li><b>handler</b> : Function<div class="sub-desc"><b>Required.</b> The function to\r
 202      * call when clicked. Arguments passed are:<ul>\r
 203      * <li><b>event</b> : Ext.EventObject<div class="sub-desc">The click event.</div></li>\r
 204      * <li><b>toolEl</b> : Ext.Element<div class="sub-desc">The tool Element.</div></li>\r
 205      * <li><b>Panel</b> : Ext.Panel<div class="sub-desc">The host Panel</div></li>\r
 206      * </ul></div></li>\r
 207      * <li><b>scope</b> : Object<div class="sub-desc">The scope in which to call the handler.</div></li>\r
 208      * <li><b>qtip</b> : String/Object<div class="sub-desc">A tip string, or\r
 209      * a config argument to {@link Ext.QuickTip#register}</div></li>\r
 210      * <li><b>hidden</b> : Boolean<div class="sub-desc">True to initially render hidden.</div></li>\r
 211      * <li><b>on</b> : Object<div class="sub-desc">A listener config object specifiying\r
 212      * event listeners in the format of an argument to {@link #addListener}</div></li>\r
 213      * </ul></div>\r
 214      * Example usage:\r
 215      * <pre><code>\r
 216 tools:[{\r
 217     id:'refresh',\r
 218     qtip: 'Refresh form Data',\r
 219     // hidden:true,\r
 220     handler: function(event, toolEl, panel){\r
 221         // refresh logic\r
 222     }\r
 223 }]\r
 224 </code></pre>\r
 225      * Note that apart from the toggle tool which is provided when a panel is\r
 226      * collapsible, these tools only provide the visual button. Any required\r
 227      * functionality must be provided by adding handlers that implement the\r
 228      * necessary behavior.\r
 229      */\r
 230     /**\r
 231      * @cfg {Boolean} hideCollapseTool\r
 232      * True to hide the expand/collapse toggle button when {@link #collapsible} = true, false to display it (defaults to false).\r
 233      */\r
 234     /**\r
 235      * @cfg {Boolean} titleCollapse\r
 236      * True to allow expanding and collapsing the panel (when {@link #collapsible} = true) by clicking anywhere in the\r
 237      * header bar, false to allow it only by clicking to tool button (defaults to false).\r
 238      */\r
 239     /**\r
 240      * @cfg {Boolean} autoScroll\r
 241      * True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary,\r
 242      * false to clip any overflowing content (defaults to false).\r
 243      */\r
 244     /**\r
 245      * @cfg {Boolean} floating\r
 246      * True to float the panel (absolute position it with automatic shimming and shadow), false to display it\r
 247      * inline where it is rendered (defaults to false).  Note that by default, setting floating to true will cause the\r
 248      * panel to display at negative offsets so that it is hidden -- because the panel is absolute positioned, the\r
 249      * position must be set explicitly after render (e.g., myPanel.setPosition(100,100);).  Also, when floating a\r
 250      * panel you should always assign a fixed width, otherwise it will be auto width and will expand to fill to the\r
 251      * right edge of the viewport.\r
 252      */\r
 253     /**\r
 254      * @cfg {Boolean/String} shadow\r
 255      * True (or a valid Ext.Shadow {@link Ext.Shadow#mode} value) to display a shadow behind the panel, false to\r
 256      * display no shadow (defaults to 'sides').  Note that this option only applies when floating = true.\r
 257      */\r
 258     /**\r
 259      * @cfg {Number} shadowOffset\r
 260      * The number of pixels to offset the shadow if displayed (defaults to 4). Note that this option only applies\r
 261      * when floating = true.\r
 262      */\r
 263     /**\r
 264      * @cfg {Boolean} shim\r
 265      * False to disable the iframe shim in browsers which need one (defaults to true).  Note that this option\r
 266      * only applies when floating = true.\r
 267      */\r
 268     /**\r
 269      * @cfg {String/Object} html\r
 270      * An HTML fragment, or a {@link Ext.DomHelper DomHelper} specification to use\r
 271      * as the panel's body content (defaults to ''). The HTML content is added by the Panel's\r
 272      * afterRender method, and so the document will not contain this HTML at the time the render\r
 273      * event is fired. This content is inserted into the body <i>before</i> any configured\r
 274      * {@link #contentEl} is appended.\r
 275      */\r
 276     /**\r
 277      * @cfg {String} contentEl\r
 278      * The id of an existing HTML node to use as the panel's body content (defaults to ''). The\r
 279      * specified Element is appended to the Panel's body Element by the Panel's afterRender method\r
 280      * <i>after any configured {@link #html HTML} has been inserted</i>, and so the document will\r
 281      * not contain this HTML at the time the render event is fired.\r
 282      */\r
 283     /**\r
 284      * @cfg {Object/Array} keys\r
 285      * A KeyMap config object (in the format expected by {@link Ext.KeyMap#addBinding} used to assign custom key\r
 286      * handling to this panel (defaults to null).\r
 287      */\r
 288      /**\r
 289        * @cfg {Boolean} draggable\r
 290        * <p>True to enable dragging of this Panel (defaults to false).</p>\r
 291        * <p>For custom drag/drop implementations, an Ext.Panel.DD\r
 292        * config could also be passed in this config instead of true. Ext.Panel.DD is an internal,\r
 293        * undocumented class which moves a proxy Element around in place of the Panel's element, but\r
 294        * provides no other behaviour during dragging or on drop. It is a subclass of\r
 295        * {@link Ext.dd.DragSource}, so behaviour may be added by implementing the interface methods\r
 296        * of {@link Ext.dd.DragDrop} eg:\r
 297        * <pre><code>\r
 298 new Ext.Panel({\r
 299     title: 'Drag me',\r
 300     x: 100,\r
 301     y: 100,\r
 302     renderTo: Ext.getBody(),\r
 303     floating: true,\r
 304     frame: true,\r
 305     width: 400,\r
 306     height: 200,\r
 307     draggable: {\r
 308 //      Config option of Ext.Panel.DD class.\r
 309 //      It's a floating Panel, so do not show a placeholder proxy in the original position.\r
 310         insertProxy: false,\r
 311 \r
 312 //      Called for each mousemove event while dragging the DD object.\r
 313         onDrag : function(e){\r
 314 //          Record the x,y position of the drag proxy so that we can\r
 315 //          position the Panel at end of drag.\r
 316             var pel = this.proxy.getEl();\r
 317             this.x = pel.getLeft(true);\r
 318             this.y = pel.getTop(true);\r
 319 \r
 320 //          Keep the Shadow aligned if there is one.\r
 321             var s = this.panel.getEl().shadow;\r
 322             if (s) {\r
 323                 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());\r
 324             }\r
 325         },\r
 326 \r
 327 //      Called on the mouseup event.\r
 328         endDrag : function(e){\r
 329             this.panel.setPosition(this.x, this.y);\r
 330         }\r
 331     }\r
 332 }).show();\r
 333 </code></pre>\r
 334      */\r
 335     /**\r
 336        * @cfg {String} tabTip\r
 337        * Adds a tooltip when mousing over the tab of a Ext.Panel which is an item of a Ext.TabPanel. Ext.QuickTips.init()\r
 338        * must be called in order for the tips to render.\r
 339      */\r
 340     /**\r
 341      * @cfg {Boolean} disabled\r
 342      * Render this panel disabled (default is false). An important note when using the disabled config on panels is\r
 343      * that IE will often fail to initialize the disabled mask element correectly if the panel's layout has not yet \r
 344      * completed by the time the Panel is disabled during the render process. If you experience this issue, you may \r
 345      * need to instead use the {@link afterlayout} event to initialize the disabled state:\r
 346      * <pre><code>\r
 347 new Ext.Panel({\r
 348     ...\r
 349     listeners: {\r
 350         'afterlayout': {\r
 351             fn: function(p){\r
 352                 p.disable();\r
 353             },\r
 354             single: true // important, as many layouts can occur\r
 355         }\r
 356     }\r
 357 });\r
 358 </code></pre>\r
 359      */\r
 360     /**\r
 361      * @cfg {Boolean} autoHeight\r
 362      * True to use height:'auto', false to use fixed height (defaults to false). <b>Note</b>: Setting autoHeight:true \r
 363      * means that the browser will manage the panel's height based on its contents, and that Ext will not manage it at \r
 364      * all. If the panel is within a layout that manages dimensions (fit, border, etc.) then setting autoHeight:true\r
 365      * can cause issues with scrolling and will not generally work as expected since the panel will take on the height\r
 366      * of its contents rather than the height required by the Ext layout.\r
 367      */\r
 368     \r
 369 \r
 370     /**\r
 371     * @cfg {String} baseCls\r
 372     * The base CSS class to apply to this panel's element (defaults to 'x-panel').\r
 373     */\r
 374     baseCls : 'x-panel',\r
 375     /**\r
 376     * @cfg {String} collapsedCls\r
 377     * A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').\r
 378     */\r
 379     collapsedCls : 'x-panel-collapsed',\r
 380     /**\r
 381     * @cfg {Boolean} maskDisabled\r
 382     * True to mask the panel when it is disabled, false to not mask it (defaults to true).  Either way, the panel\r
 383     * will always tell its contained elements to disable themselves when it is disabled, but masking the panel\r
 384     * can provide an additional visual cue that the panel is disabled.\r
 385     */\r
 386     maskDisabled: true,\r
 387     /**\r
 388     * @cfg {Boolean} animCollapse\r
 389     * True to animate the transition when the panel is collapsed, false to skip the animation (defaults to true\r
 390     * if the {@link Ext.Fx} class is available, otherwise false).\r
 391     */\r
 392     animCollapse: Ext.enableFx,\r
 393     /**\r
 394     * @cfg {Boolean} headerAsText\r
 395     * True to display the panel title in the header, false to hide it (defaults to true).\r
 396     */\r
 397     headerAsText: true,\r
 398     /**\r
 399     * @cfg {String} buttonAlign\r
 400     * The alignment of any buttons added to this panel.  Valid values are 'right,' 'left' and 'center' (defaults to 'right').\r
 401     */\r
 402     buttonAlign: 'right',\r
 403     /**\r
 404      * @cfg {Boolean} collapsed\r
 405      * True to render the panel collapsed, false to render it expanded (defaults to false).\r
 406      */\r
 407     collapsed : false,\r
 408     /**\r
 409     * @cfg {Boolean} collapseFirst\r
 410     * True to make sure the collapse/expand toggle button always renders first (to the left of) any other tools\r
 411     * in the panel's title bar, false to render it last (defaults to true).\r
 412     */\r
 413     collapseFirst: true,\r
 414     /**\r
 415      * @cfg {Number} minButtonWidth\r
 416      * Minimum width in pixels of all buttons in this panel (defaults to 75)\r
 417      */\r
 418     minButtonWidth:75,\r
 419     /**\r
 420      * @cfg {String} elements\r
 421      * A comma-delimited list of panel elements to initialize when the panel is rendered.  Normally, this list will be\r
 422      * generated automatically based on the items added to the panel at config time, but sometimes it might be useful to\r
 423      * make sure a structural element is rendered even if not specified at config time (for example, you may want\r
 424      * to add a button or toolbar dynamically after the panel has been rendered).  Adding those elements to this\r
 425      * list will allocate the required placeholders in the panel when it is rendered.  Valid values are<ul>\r
 426      * <li><b>header</b></li>\r
 427      * <li><b>tbar</b> (top bar)</li>\r
 428      * <li><b>body</b> (required)</li>\r
 429      * <li><b>bbar</b> (bottom bar)</li>\r
 430      * <li><b>footer</b><li>\r
 431      * </ul>\r
 432      * Defaults to 'body'.\r
 433      */\r
 434     elements : 'body',\r
 435 \r
 436     // protected - these could be used to customize the behavior of the window,\r
 437     // but changing them would not be useful without further mofifications and\r
 438     // could lead to unexpected or undesirable results.\r
 439     toolTarget : 'header',\r
 440     collapseEl : 'bwrap',\r
 441     slideAnchor : 't',\r
 442     disabledClass: '',\r
 443 \r
 444     // private, notify box this class will handle heights\r
 445     deferHeight: true,\r
 446     // private\r
 447     expandDefaults: {\r
 448         duration:.25\r
 449     },\r
 450     // private\r
 451     collapseDefaults: {\r
 452         duration:.25\r
 453     },\r
 454 \r
 455     // private\r
 456     initComponent : function(){\r
 457         Ext.Panel.superclass.initComponent.call(this);\r
 458 \r
 459         this.addEvents(\r
 460             /**\r
 461              * @event bodyresize\r
 462              * Fires after the Panel has been resized.\r
 463              * @param {Ext.Panel} p the Panel which has been resized.\r
 464              * @param {Number} width The Panel's new width.\r
 465              * @param {Number} height The Panel's new height.\r
 466              */\r
 467             'bodyresize',\r
 468             /**\r
 469              * @event titlechange\r
 470              * Fires after the Panel title has been set or changed.\r
 471              * @param {Ext.Panel} p the Panel which has had its title changed.\r
 472              * @param {String} The new title.\r
 473              */\r
 474             'titlechange',\r
 475             /**\r
 476              * @event iconchange\r
 477              * Fires after the Panel icon class has been set or changed.\r
 478              * @param {Ext.Panel} p the Panel which has had its icon class changed.\r
 479              * @param {String} The new icon class.\r
 480              * @param {String} The old icon class.\r
 481              */\r
 482             'iconchange',\r
 483             /**\r
 484              * @event collapse\r
 485              * Fires after the Panel has been collapsed.\r
 486              * @param {Ext.Panel} p the Panel that has been collapsed.\r
 487              */\r
 488             'collapse',\r
 489             /**\r
 490              * @event expand\r
 491              * Fires after the Panel has been expanded.\r
 492              * @param {Ext.Panel} p The Panel that has been expanded.\r
 493              */\r
 494             'expand',\r
 495             /**\r
 496              * @event beforecollapse\r
 497              * Fires before the Panel is collapsed.  A handler can return false to cancel the collapse.\r
 498              * @param {Ext.Panel} p the Panel being collapsed.\r
 499              * @param {Boolean} animate True if the collapse is animated, else false.\r
 500              */\r
 501             'beforecollapse',\r
 502             /**\r
 503              * @event beforeexpand\r
 504              * Fires before the Panel is expanded.  A handler can return false to cancel the expand.\r
 505              * @param {Ext.Panel} p The Panel being expanded.\r
 506              * @param {Boolean} animate True if the expand is animated, else false.\r
 507              */\r
 508             'beforeexpand',\r
 509             /**\r
 510              * @event beforeclose\r
 511              * Fires before the Panel is closed.  Note that Panels do not directly support being closed, but some\r
 512              * Panel subclasses do (like {@link Ext.Window}).  This event only applies to such subclasses.\r
 513              * A handler can return false to cancel the close.\r
 514              * @param {Ext.Panel} p The Panel being closed.\r
 515              */\r
 516             'beforeclose',\r
 517             /**\r
 518              * @event close\r
 519              * Fires after the Panel is closed.  Note that Panels do not directly support being closed, but some\r
 520              * Panel subclasses do (like {@link Ext.Window}).\r
 521              * @param {Ext.Panel} p The Panel that has been closed.\r
 522              */\r
 523             'close',\r
 524             /**\r
 525              * @event activate\r
 526              * Fires after the Panel has been visually activated.\r
 527              * Note that Panels do not directly support being activated, but some Panel subclasses\r
 528              * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the\r
 529              * activate and deactivate events under the control of the TabPanel.\r
 530              * @param {Ext.Panel} p The Panel that has been activated.\r
 531              */\r
 532             'activate',\r
 533             /**\r
 534              * @event deactivate\r
 535              * Fires after the Panel has been visually deactivated.\r
 536              * Note that Panels do not directly support being deactivated, but some Panel subclasses\r
 537              * do (like {@link Ext.Window}). Panels which are child Components of a TabPanel fire the\r
 538              * activate and deactivate events under the control of the TabPanel.\r
 539              * @param {Ext.Panel} p The Panel that has been deactivated.\r
 540              */\r
 541             'deactivate'\r
 542         );\r
 543 \r
 544         // shortcuts\r
 545         if(this.tbar){\r
 546             this.elements += ',tbar';\r
 547             if(typeof this.tbar == 'object'){\r
 548                 this.topToolbar = this.tbar;\r
 549             }\r
 550             delete this.tbar;\r
 551         }\r
 552         if(this.bbar){\r
 553             this.elements += ',bbar';\r
 554             if(typeof this.bbar == 'object'){\r
 555                 this.bottomToolbar = this.bbar;\r
 556             }\r
 557             delete this.bbar;\r
 558         }\r
 559 \r
 560         if(this.header === true){\r
 561             this.elements += ',header';\r
 562             delete this.header;\r
 563         }else if(this.title && this.header !== false){\r
 564             this.elements += ',header';\r
 565         }\r
 566 \r
 567         if(this.footer === true){\r
 568             this.elements += ',footer';\r
 569             delete this.footer;\r
 570         }\r
 571 \r
 572         if(this.buttons){\r
 573             var btns = this.buttons;\r
 574             /**\r
 575              * This Panel's Array of buttons as created from the <tt>buttons</tt>\r
 576              * config property. Read only.\r
 577              * @type Array\r
 578              * @property buttons\r
 579              */\r
 580             this.buttons = [];\r
 581             for(var i = 0, len = btns.length; i < len; i++) {\r
 582                 if(btns[i].render){ // button instance\r
 583                     btns[i].ownerCt = this;\r
 584                     this.buttons.push(btns[i]);\r
 585                 }else{\r
 586                     this.addButton(btns[i]);\r
 587                 }\r
 588             }\r
 589         }\r
 590         if(this.autoLoad){\r
 591             this.on('render', this.doAutoLoad, this, {delay:10});\r
 592         }\r
 593     },\r
 594 \r
 595     // private\r
 596     createElement : function(name, pnode){\r
 597         if(this[name]){\r
 598             pnode.appendChild(this[name].dom);\r
 599             return;\r
 600         }\r
 601 \r
 602         if(name === 'bwrap' || this.elements.indexOf(name) != -1){\r
 603             if(this[name+'Cfg']){\r
 604                 this[name] = Ext.fly(pnode).createChild(this[name+'Cfg']);\r
 605             }else{\r
 606                 var el = document.createElement('div');\r
 607                 el.className = this[name+'Cls'];\r
 608                 this[name] = Ext.get(pnode.appendChild(el));\r
 609             }\r
 610             if(this[name+'CssClass']){\r
 611                 this[name].addClass(this[name+'CssClass']);\r
 612             }\r
 613             if(this[name+'Style']){\r
 614                 this[name].applyStyles(this[name+'Style']);\r
 615             }\r
 616         }\r
 617     },\r
 618 \r
 619     // private\r
 620     onRender : function(ct, position){\r
 621         Ext.Panel.superclass.onRender.call(this, ct, position);\r
 622 \r
 623         this.createClasses();\r
 624 \r
 625         if(this.el){ // existing markup\r
 626             this.el.addClass(this.baseCls);\r
 627             this.header = this.el.down('.'+this.headerCls);\r
 628             this.bwrap = this.el.down('.'+this.bwrapCls);\r
 629             var cp = this.bwrap ? this.bwrap : this.el;\r
 630             this.tbar = cp.down('.'+this.tbarCls);\r
 631             this.body = cp.down('.'+this.bodyCls);\r
 632             this.bbar = cp.down('.'+this.bbarCls);\r
 633             this.footer = cp.down('.'+this.footerCls);\r
 634             this.fromMarkup = true;\r
 635         }else{\r
 636             this.el = ct.createChild({\r
 637                 id: this.id,\r
 638                 cls: this.baseCls\r
 639             }, position);\r
 640         }\r
 641         var el = this.el, d = el.dom;\r
 642 \r
 643         if(this.cls){\r
 644             this.el.addClass(this.cls);\r
 645         }\r
 646 \r
 647         if(this.buttons){\r
 648             this.elements += ',footer';\r
 649         }\r
 650 \r
 651         // This block allows for maximum flexibility and performance when using existing markup\r
 652 \r
 653         // framing requires special markup\r
 654         if(this.frame){\r
 655             el.insertHtml('afterBegin', String.format(Ext.Element.boxMarkup, this.baseCls));\r
 656 \r
 657             this.createElement('header', d.firstChild.firstChild.firstChild);\r
 658             this.createElement('bwrap', d);\r
 659 \r
 660             // append the mid and bottom frame to the bwrap\r
 661             var bw = this.bwrap.dom;\r
 662             var ml = d.childNodes[1], bl = d.childNodes[2];\r
 663             bw.appendChild(ml);\r
 664             bw.appendChild(bl);\r
 665 \r
 666             var mc = bw.firstChild.firstChild.firstChild;\r
 667             this.createElement('tbar', mc);\r
 668             this.createElement('body', mc);\r
 669             this.createElement('bbar', mc);\r
 670             this.createElement('footer', bw.lastChild.firstChild.firstChild);\r
 671 \r
 672             if(!this.footer){\r
 673                 this.bwrap.dom.lastChild.className += ' x-panel-nofooter';\r
 674             }\r
 675         }else{\r
 676             this.createElement('header', d);\r
 677             this.createElement('bwrap', d);\r
 678 \r
 679             // append the mid and bottom frame to the bwrap\r
 680             var bw = this.bwrap.dom;\r
 681             this.createElement('tbar', bw);\r
 682             this.createElement('body', bw);\r
 683             this.createElement('bbar', bw);\r
 684             this.createElement('footer', bw);\r
 685 \r
 686             if(!this.header){\r
 687                 this.body.addClass(this.bodyCls + '-noheader');\r
 688                 if(this.tbar){\r
 689                     this.tbar.addClass(this.tbarCls + '-noheader');\r
 690                 }\r
 691             }\r
 692         }\r
 693 \r
 694         if(this.border === false){\r
 695             this.el.addClass(this.baseCls + '-noborder');\r
 696             this.body.addClass(this.bodyCls + '-noborder');\r
 697             if(this.header){\r
 698                 this.header.addClass(this.headerCls + '-noborder');\r
 699             }\r
 700             if(this.footer){\r
 701                 this.footer.addClass(this.footerCls + '-noborder');\r
 702             }\r
 703             if(this.tbar){\r
 704                 this.tbar.addClass(this.tbarCls + '-noborder');\r
 705             }\r
 706             if(this.bbar){\r
 707                 this.bbar.addClass(this.bbarCls + '-noborder');\r
 708             }\r
 709         }\r
 710 \r
 711         if(this.bodyBorder === false){\r
 712            this.body.addClass(this.bodyCls + '-noborder');\r
 713         }\r
 714 \r
 715         this.bwrap.enableDisplayMode('block');\r
 716 \r
 717         if(this.header){\r
 718             this.header.unselectable();\r
 719 \r
 720             // for tools, we need to wrap any existing header markup\r
 721             if(this.headerAsText){\r
 722                 this.header.dom.innerHTML =\r
 723                     '<span class="' + this.headerTextCls + '">'+this.header.dom.innerHTML+'</span>';\r
 724 \r
 725                 if(this.iconCls){\r
 726                     this.setIconClass(this.iconCls);\r
 727                 }\r
 728             }\r
 729         }\r
 730 \r
 731         if(this.floating){\r
 732             this.makeFloating(this.floating);\r
 733         }\r
 734 \r
 735         if(this.collapsible){\r
 736             this.tools = this.tools ? this.tools.slice(0) : [];\r
 737             if(!this.hideCollapseTool){\r
 738                 this.tools[this.collapseFirst?'unshift':'push']({\r
 739                     id: 'toggle',\r
 740                     handler : this.toggleCollapse,\r
 741                     scope: this\r
 742                 });\r
 743             }\r
 744             if(this.titleCollapse && this.header){\r
 745                 this.header.on('click', this.toggleCollapse, this);\r
 746                 this.header.setStyle('cursor', 'pointer');\r
 747             }\r
 748         }\r
 749         if(this.tools){\r
 750             var ts = this.tools;\r
 751             this.tools = {};\r
 752             this.addTool.apply(this, ts);\r
 753         }else{\r
 754             this.tools = {};\r
 755         }\r
 756 \r
 757         if(this.buttons && this.buttons.length > 0){\r
 758             // tables are required to maintain order and for correct IE layout\r
 759             var tb = this.footer.createChild({cls:'x-panel-btns-ct', cn: {\r
 760                 cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,\r
 761                 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'\r
 762             }}, null, true);\r
 763             var tr = tb.getElementsByTagName('tr')[0];\r
 764             for(var i = 0, len = this.buttons.length; i < len; i++) {\r
 765                 var b = this.buttons[i];\r
 766                 var td = document.createElement('td');\r
 767                 td.className = 'x-panel-btn-td';\r
 768                 b.render(tr.appendChild(td));\r
 769             }\r
 770         }\r
 771 \r
 772         if(this.tbar && this.topToolbar){\r
 773             if(Ext.isArray(this.topToolbar)){\r
 774                 this.topToolbar = new Ext.Toolbar(this.topToolbar);\r
 775             }\r
 776             this.topToolbar.render(this.tbar);\r
 777             this.topToolbar.ownerCt = this;\r
 778         }\r
 779         if(this.bbar && this.bottomToolbar){\r
 780             if(Ext.isArray(this.bottomToolbar)){\r
 781                 this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);\r
 782             }\r
 783             this.bottomToolbar.render(this.bbar);\r
 784             this.bottomToolbar.ownerCt = this;\r
 785         }\r
 786     },\r
 787 \r
 788     /**\r
 789      * Sets the CSS class that provides the icon image for this panel.  This method will replace any existing\r
 790      * icon class if one has already been set.\r
 791      * @param {String} cls The new CSS class name\r
 792      */\r
 793     setIconClass : function(cls){\r
 794         var old = this.iconCls;\r
 795         this.iconCls = cls;\r
 796         if(this.rendered && this.header){\r
 797             if(this.frame){\r
 798                 this.header.addClass('x-panel-icon');\r
 799                 this.header.replaceClass(old, this.iconCls);\r
 800             }else{\r
 801                 var hd = this.header.dom;\r
 802                 var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;\r
 803                 if(img){\r
 804                     Ext.fly(img).replaceClass(old, this.iconCls);\r
 805                 }else{\r
 806                     Ext.DomHelper.insertBefore(hd.firstChild, {\r
 807                         tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls\r
 808                     });\r
 809                  }\r
 810             }\r
 811         }\r
 812         this.fireEvent('iconchange', this, cls, old);\r
 813     },\r
 814 \r
 815     // private\r
 816     makeFloating : function(cfg){\r
 817         this.floating = true;\r
 818         this.el = new Ext.Layer(\r
 819             typeof cfg == 'object' ? cfg : {\r
 820                 shadow: this.shadow !== undefined ? this.shadow : 'sides',\r
 821                 shadowOffset: this.shadowOffset,\r
 822                 constrain:false,\r
 823                 shim: this.shim === false ? false : undefined\r
 824             }, this.el\r
 825         );\r
 826     },\r
 827 \r
 828     /**\r
 829      * Returns the toolbar from the top (tbar) section of the panel.\r
 830      * @return {Ext.Toolbar} The toolbar\r
 831      */\r
 832     getTopToolbar : function(){\r
 833         return this.topToolbar;\r
 834     },\r
 835 \r
 836     /**\r
 837      * Returns the toolbar from the bottom (bbar) section of the panel.\r
 838      * @return {Ext.Toolbar} The toolbar\r
 839      */\r
 840     getBottomToolbar : function(){\r
 841         return this.bottomToolbar;\r
 842     },\r
 843 \r
 844     /**\r
 845      * Adds a button to this panel.  Note that this method must be called prior to rendering.  The preferred\r
 846      * approach is to add buttons via the {@link #buttons} config.\r
 847      * @param {String/Object} config A valid {@link Ext.Button} config.  A string will become the text for a default\r
 848      * button config, an object will be treated as a button config object.\r
 849      * @param {Function} handler The function to be called on button {@link Ext.Button#click}\r
 850      * @param {Object} scope The scope to use for the button handler function\r
 851      * @return {Ext.Button} The button that was added\r
 852      */\r
 853     addButton : function(config, handler, scope){\r
 854         var bc = {\r
 855             handler: handler,\r
 856             scope: scope,\r
 857             minWidth: this.minButtonWidth,\r
 858             hideParent:true\r
 859         };\r
 860         if(typeof config == "string"){\r
 861             bc.text = config;\r
 862         }else{\r
 863             Ext.apply(bc, config);\r
 864         }\r
 865         var btn = new Ext.Button(bc);\r
 866         btn.ownerCt = this;\r
 867         if(!this.buttons){\r
 868             this.buttons = [];\r
 869         }\r
 870         this.buttons.push(btn);\r
 871         return btn;\r
 872     },\r
 873 \r
 874     // private\r
 875     addTool : function(){\r
 876         if(!this[this.toolTarget]) { // no where to render tools!\r
 877             return;\r
 878         }\r
 879         if(!this.toolTemplate){\r
 880             // initialize the global tool template on first use\r
 881             var tt = new Ext.Template(\r
 882                  '<div class="x-tool x-tool-{id}">&#160;</div>'\r
 883             );\r
 884             tt.disableFormats = true;\r
 885             tt.compile();\r
 886             Ext.Panel.prototype.toolTemplate = tt;\r
 887         }\r
 888         for(var i = 0, a = arguments, len = a.length; i < len; i++) {\r
 889             var tc = a[i];\r
 890             if(!this.tools[tc.id]){\r
 891                     var overCls = 'x-tool-'+tc.id+'-over';\r
 892                     var t = this.toolTemplate.insertFirst((tc.align !== 'left') ? this[this.toolTarget] : this[this.toolTarget].child('span'), tc, true);\r
 893                     this.tools[tc.id] = t;\r
 894                     t.enableDisplayMode('block');\r
 895                     t.on('click', this.createToolHandler(t, tc, overCls, this));\r
 896                     if(tc.on){\r
 897                         t.on(tc.on);\r
 898                     }\r
 899                     if(tc.hidden){\r
 900                         t.hide();\r
 901                     }\r
 902                     if(tc.qtip){\r
 903                         if(typeof tc.qtip == 'object'){\r
 904                             Ext.QuickTips.register(Ext.apply({\r
 905                                   target: t.id\r
 906                             }, tc.qtip));\r
 907                         } else {\r
 908                             t.dom.qtip = tc.qtip;\r
 909                         }\r
 910                     }\r
 911                     t.addClassOnOver(overCls);\r
 912             }\r
 913         }\r
 914     },\r
 915 \r
 916     // private\r
 917     onShow : function(){\r
 918         if(this.floating){\r
 919             return this.el.show();\r
 920         }\r
 921         Ext.Panel.superclass.onShow.call(this);\r
 922     },\r
 923 \r
 924     // private\r
 925     onHide : function(){\r
 926         if(this.floating){\r
 927             return this.el.hide();\r
 928         }\r
 929         Ext.Panel.superclass.onHide.call(this);\r
 930     },\r
 931 \r
 932     // private\r
 933     createToolHandler : function(t, tc, overCls, panel){\r
 934         return function(e){\r
 935             t.removeClass(overCls);\r
 936             e.stopEvent();\r
 937             if(tc.handler){\r
 938                 tc.handler.call(tc.scope || t, e, t, panel);\r
 939             }\r
 940         };\r
 941     },\r
 942 \r
 943     // private\r
 944     afterRender : function(){\r
 945         if(this.fromMarkup && this.height === undefined && !this.autoHeight){\r
 946             this.height = this.el.getHeight();\r
 947         }\r
 948         if(this.floating && !this.hidden && !this.initHidden){\r
 949             this.el.show();\r
 950         }\r
 951         if(this.title){\r
 952             this.setTitle(this.title);\r
 953         }\r
 954         this.setAutoScroll();\r
 955         if(this.html){\r
 956             this.body.update(typeof this.html == 'object' ?\r
 957                              Ext.DomHelper.markup(this.html) :\r
 958                              this.html);\r
 959             delete this.html;\r
 960         }\r
 961         if(this.contentEl){\r
 962             var ce = Ext.getDom(this.contentEl);\r
 963             Ext.fly(ce).removeClass(['x-hidden', 'x-hide-display']);\r
 964             this.body.dom.appendChild(ce);\r
 965         }\r
 966         if(this.collapsed){\r
 967             this.collapsed = false;\r
 968             this.collapse(false);\r
 969         }\r
 970         Ext.Panel.superclass.afterRender.call(this); // do sizing calcs last\r
 971         this.initEvents();\r
 972     },\r
 973 \r
 974     // private\r
 975     setAutoScroll : function(){\r
 976         if(this.rendered && this.autoScroll){\r
 977             var el = this.body || this.el;\r
 978             if(el){\r
 979                 el.setOverflow('auto');\r
 980             }\r
 981         }\r
 982     },\r
 983 \r
 984     // private\r
 985     getKeyMap : function(){\r
 986         if(!this.keyMap){\r
 987             this.keyMap = new Ext.KeyMap(this.el, this.keys);\r
 988         }\r
 989         return this.keyMap;\r
 990     },\r
 991 \r
 992     // private\r
 993     initEvents : function(){\r
 994         if(this.keys){\r
 995             this.getKeyMap();\r
 996         }\r
 997         if(this.draggable){\r
 998             this.initDraggable();\r
 999         }\r
1000     },\r
1001 \r
1002     // private\r
1003     initDraggable : function(){\r
1004         /**\r
1005          * <p>If this Panel is configured {@link #draggable}, this property will contain\r
1006          * an instance of {@link Ext.dd.DragSource} which handles dragging the Panel.</p>\r
1007          * The developer must provide implementations of the abstract methods of {@link Ext.dd.DragSource}\r
1008          * in order to supply behaviour for each stage of the drag/drop process. See {@link #draggable}.\r
1009          * @type Ext.dd.DragSource.\r
1010          * @property dd\r
1011          */\r
1012         this.dd = new Ext.Panel.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);\r
1013     },\r
1014 \r
1015     // private\r
1016     beforeEffect : function(){\r
1017         if(this.floating){\r
1018             this.el.beforeAction();\r
1019         }\r
1020         this.el.addClass('x-panel-animated');\r
1021     },\r
1022 \r
1023     // private\r
1024     afterEffect : function(){\r
1025         this.syncShadow();\r
1026         this.el.removeClass('x-panel-animated');\r
1027     },\r
1028 \r
1029     // private - wraps up an animation param with internal callbacks\r
1030     createEffect : function(a, cb, scope){\r
1031         var o = {\r
1032             scope:scope,\r
1033             block:true\r
1034         };\r
1035         if(a === true){\r
1036             o.callback = cb;\r
1037             return o;\r
1038         }else if(!a.callback){\r
1039             o.callback = cb;\r
1040         }else { // wrap it up\r
1041             o.callback = function(){\r
1042                 cb.call(scope);\r
1043                 Ext.callback(a.callback, a.scope);\r
1044             };\r
1045         }\r
1046         return Ext.applyIf(o, a);\r
1047     },\r
1048 \r
1049     /**\r
1050      * Collapses the panel body so that it becomes hidden.  Fires the {@link #beforecollapse} event which will\r
1051      * cancel the collapse action if it returns false.\r
1052      * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the\r
1053      * {@link #animCollapse} panel config)\r
1054      * @return {Ext.Panel} this\r
1055      */\r
1056     collapse : function(animate){\r
1057         if(this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforecollapse', this, animate) === false){\r
1058             return;\r
1059         }\r
1060         var doAnim = animate === true || (animate !== false && this.animCollapse);\r
1061         this.beforeEffect();\r
1062         this.onCollapse(doAnim, animate);\r
1063         return this;\r
1064     },\r
1065 \r
1066     // private\r
1067     onCollapse : function(doAnim, animArg){\r
1068         if(doAnim){\r
1069             this[this.collapseEl].slideOut(this.slideAnchor,\r
1070                     Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this),\r
1071                         this.collapseDefaults));\r
1072         }else{\r
1073             this[this.collapseEl].hide();\r
1074             this.afterCollapse();\r
1075         }\r
1076     },\r
1077 \r
1078     // private\r
1079     afterCollapse : function(){\r
1080         this.collapsed = true;\r
1081         this.el.addClass(this.collapsedCls);\r
1082         this.afterEffect();\r
1083         this.fireEvent('collapse', this);\r
1084     },\r
1085 \r
1086     /**\r
1087      * Expands the panel body so that it becomes visible.  Fires the {@link #beforeexpand} event which will\r
1088      * cancel the expand action if it returns false.\r
1089      * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the\r
1090      * {@link #animCollapse} panel config)\r
1091      * @return {Ext.Panel} this\r
1092      */\r
1093     expand : function(animate){\r
1094         if(!this.collapsed || this.el.hasFxBlock() || this.fireEvent('beforeexpand', this, animate) === false){\r
1095             return;\r
1096         }\r
1097         var doAnim = animate === true || (animate !== false && this.animCollapse);\r
1098         this.el.removeClass(this.collapsedCls);\r
1099         this.beforeEffect();\r
1100         this.onExpand(doAnim, animate);\r
1101         return this;\r
1102     },\r
1103 \r
1104     // private\r
1105     onExpand : function(doAnim, animArg){\r
1106         if(doAnim){\r
1107             this[this.collapseEl].slideIn(this.slideAnchor,\r
1108                     Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),\r
1109                         this.expandDefaults));\r
1110         }else{\r
1111             this[this.collapseEl].show();\r
1112             this.afterExpand();\r
1113         }\r
1114     },\r
1115 \r
1116     // private\r
1117     afterExpand : function(){\r
1118         this.collapsed = false;\r
1119         this.afterEffect();\r
1120         this.fireEvent('expand', this);\r
1121     },\r
1122 \r
1123     /**\r
1124      * Shortcut for performing an {@link #expand} or {@link #collapse} based on the current state of the panel.\r
1125      * @param {Boolean} animate True to animate the transition, else false (defaults to the value of the\r
1126      * {@link #animCollapse} panel config)\r
1127      * @return {Ext.Panel} this\r
1128      */\r
1129     toggleCollapse : function(animate){\r
1130         this[this.collapsed ? 'expand' : 'collapse'](animate);\r
1131         return this;\r
1132     },\r
1133 \r
1134     // private\r
1135     onDisable : function(){\r
1136         if(this.rendered && this.maskDisabled){\r
1137             this.el.mask();\r
1138         }\r
1139         Ext.Panel.superclass.onDisable.call(this);\r
1140     },\r
1141 \r
1142     // private\r
1143     onEnable : function(){\r
1144         if(this.rendered && this.maskDisabled){\r
1145             this.el.unmask();\r
1146         }\r
1147         Ext.Panel.superclass.onEnable.call(this);\r
1148     },\r
1149 \r
1150     // private\r
1151     onResize : function(w, h){\r
1152         if(w !== undefined || h !== undefined){\r
1153             if(!this.collapsed){\r
1154                 if(typeof w == 'number'){\r
1155                     this.body.setWidth(\r
1156                             this.adjustBodyWidth(w - this.getFrameWidth()));\r
1157                 }else if(w == 'auto'){\r
1158                     this.body.setWidth(w);\r
1159                 }\r
1160 \r
1161                 if(typeof h == 'number'){\r
1162                     this.body.setHeight(\r
1163                             this.adjustBodyHeight(h - this.getFrameHeight()));\r
1164                 }else if(h == 'auto'){\r
1165                     this.body.setHeight(h);\r
1166                 }\r
1167                 \r
1168                 if(this.disabled && this.el._mask){\r
1169                     this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());\r
1170                 }\r
1171             }else{\r
1172                 this.queuedBodySize = {width: w, height: h};\r
1173                 if(!this.queuedExpand && this.allowQueuedExpand !== false){\r
1174                     this.queuedExpand = true;\r
1175                     this.on('expand', function(){\r
1176                         delete this.queuedExpand;\r
1177                         this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);\r
1178                         this.doLayout();\r
1179                     }, this, {single:true});\r
1180                 }\r
1181             }\r
1182             this.fireEvent('bodyresize', this, w, h);\r
1183         }\r
1184         this.syncShadow();\r
1185     },\r
1186 \r
1187     // private\r
1188     adjustBodyHeight : function(h){\r
1189         return h;\r
1190     },\r
1191 \r
1192     // private\r
1193     adjustBodyWidth : function(w){\r
1194         return w;\r
1195     },\r
1196 \r
1197     // private\r
1198     onPosition : function(){\r
1199         this.syncShadow();\r
1200     },\r
1201 \r
1202     /**\r
1203      * Returns the width in pixels of the framing elements of this panel (not including the body width).  To\r
1204      * retrieve the body width see {@link #getInnerWidth}.\r
1205      * @return {Number} The frame width\r
1206      */\r
1207     getFrameWidth : function(){\r
1208         var w = this.el.getFrameWidth('lr');\r
1209 \r
1210         if(this.frame){\r
1211             var l = this.bwrap.dom.firstChild;\r
1212             w += (Ext.fly(l).getFrameWidth('l') + Ext.fly(l.firstChild).getFrameWidth('r'));\r
1213             var mc = this.bwrap.dom.firstChild.firstChild.firstChild;\r
1214             w += Ext.fly(mc).getFrameWidth('lr');\r
1215         }\r
1216         return w;\r
1217     },\r
1218 \r
1219     /**\r
1220      * Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and\r
1221      * header and footer elements, but not including the body height).  To retrieve the body height see {@link #getInnerHeight}.\r
1222      * @return {Number} The frame height\r
1223      */\r
1224     getFrameHeight : function(){\r
1225         var h  = this.el.getFrameWidth('tb');\r
1226         h += (this.tbar ? this.tbar.getHeight() : 0) +\r
1227              (this.bbar ? this.bbar.getHeight() : 0);\r
1228 \r
1229         if(this.frame){\r
1230             var hd = this.el.dom.firstChild;\r
1231             var ft = this.bwrap.dom.lastChild;\r
1232             h += (hd.offsetHeight + ft.offsetHeight);\r
1233             var mc = this.bwrap.dom.firstChild.firstChild.firstChild;\r
1234             h += Ext.fly(mc).getFrameWidth('tb');\r
1235         }else{\r
1236             h += (this.header ? this.header.getHeight() : 0) +\r
1237                 (this.footer ? this.footer.getHeight() : 0);\r
1238         }\r
1239         return h;\r
1240     },\r
1241 \r
1242     /**\r
1243      * Returns the width in pixels of the body element (not including the width of any framing elements).\r
1244      * For the frame width see {@link #getFrameWidth}.\r
1245      * @return {Number} The body width\r
1246      */\r
1247     getInnerWidth : function(){\r
1248         return this.getSize().width - this.getFrameWidth();\r
1249     },\r
1250 \r
1251     /**\r
1252      * Returns the height in pixels of the body element (not including the height of any framing elements).\r
1253      * For the frame height see {@link #getFrameHeight}.\r
1254      * @return {Number} The body height\r
1255      */\r
1256     getInnerHeight : function(){\r
1257         return this.getSize().height - this.getFrameHeight();\r
1258     },\r
1259 \r
1260     // private\r
1261     syncShadow : function(){\r
1262         if(this.floating){\r
1263             this.el.sync(true);\r
1264         }\r
1265     },\r
1266 \r
1267     // private\r
1268     getLayoutTarget : function(){\r
1269         return this.body;\r
1270     },\r
1271 \r
1272     /**\r
1273      * <p>Sets the title text for the panel and optionally the icon class.</p>\r
1274      * <p>In order to be able to set the title, a header element must have been created\r
1275      * for the Panel. This is triggered either by configuring the Panel with a non-blank title,\r
1276      * or configuring it with <tt><b>{@link #header}: true</b></tt>.</p>\r
1277      * @param {String} title The title text to set\r
1278      * @param {String} iconCls (optional) iconCls A user-defined CSS class that provides the icon image for this panel\r
1279      */\r
1280     setTitle : function(title, iconCls){\r
1281         this.title = title;\r
1282         if(this.header && this.headerAsText){\r
1283             this.header.child('span').update(title);\r
1284         }\r
1285         if(iconCls){\r
1286             this.setIconClass(iconCls);\r
1287         }\r
1288         this.fireEvent('titlechange', this, title);\r
1289         return this;\r
1290     },\r
1291 \r
1292     /**\r
1293      * Get the {@link Ext.Updater} for this panel. Enables you to perform Ajax updates of this panel's body.\r
1294      * @return {Ext.Updater} The Updater\r
1295      */\r
1296     getUpdater : function(){\r
1297         return this.body.getUpdater();\r
1298     },\r
1299 \r
1300      /**\r
1301      * Loads this content panel immediately with content returned from an XHR call.\r
1302      * @param {Object/String/Function} config A config object containing any of the following options:\r
1303 <pre><code>\r
1304 panel.load({\r
1305     url: "your-url.php",\r
1306     params: {param1: "foo", param2: "bar"}, // or a URL encoded string\r
1307     callback: yourFunction,\r
1308     scope: yourObject, // optional scope for the callback\r
1309     discardUrl: false,\r
1310     nocache: false,\r
1311     text: "Loading...",\r
1312     timeout: 30,\r
1313     scripts: false\r
1314 });\r
1315 </code></pre>\r
1316      * The only required property is url. The optional properties nocache, text and scripts\r
1317      * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their\r
1318      * associated property on this panel Updater instance.\r
1319      * @return {Ext.Panel} this\r
1320      */\r
1321     load : function(){\r
1322         var um = this.body.getUpdater();\r
1323         um.update.apply(um, arguments);\r
1324         return this;\r
1325     },\r
1326 \r
1327     // private\r
1328     beforeDestroy : function(){\r
1329         if(this.header){\r
1330             this.header.removeAllListeners();\r
1331             if(this.headerAsText){\r
1332                 Ext.Element.uncache(this.header.child('span'));\r
1333             }\r
1334         }\r
1335         Ext.Element.uncache(\r
1336             this.header,\r
1337             this.tbar,\r
1338             this.bbar,\r
1339             this.footer,\r
1340             this.body,\r
1341             this.bwrap\r
1342         );\r
1343         if(this.tools){\r
1344             for(var k in this.tools){\r
1345                 Ext.destroy(this.tools[k]);\r
1346             }\r
1347         }\r
1348         if(this.buttons){\r
1349             for(var b in this.buttons){\r
1350                 Ext.destroy(this.buttons[b]);\r
1351             }\r
1352         }\r
1353         Ext.destroy(\r
1354             this.topToolbar,\r
1355             this.bottomToolbar\r
1356         );\r
1357         Ext.Panel.superclass.beforeDestroy.call(this);\r
1358     },\r
1359 \r
1360     // private\r
1361     createClasses : function(){\r
1362         this.headerCls = this.baseCls + '-header';\r
1363         this.headerTextCls = this.baseCls + '-header-text';\r
1364         this.bwrapCls = this.baseCls + '-bwrap';\r
1365         this.tbarCls = this.baseCls + '-tbar';\r
1366         this.bodyCls = this.baseCls + '-body';\r
1367         this.bbarCls = this.baseCls + '-bbar';\r
1368         this.footerCls = this.baseCls + '-footer';\r
1369     },\r
1370 \r
1371     // private\r
1372     createGhost : function(cls, useShim, appendTo){\r
1373         var el = document.createElement('div');\r
1374         el.className = 'x-panel-ghost ' + (cls ? cls : '');\r
1375         if(this.header){\r
1376             el.appendChild(this.el.dom.firstChild.cloneNode(true));\r
1377         }\r
1378         Ext.fly(el.appendChild(document.createElement('ul'))).setHeight(this.bwrap.getHeight());\r
1379         el.style.width = this.el.dom.offsetWidth + 'px';;\r
1380         if(!appendTo){\r
1381             this.container.dom.appendChild(el);\r
1382         }else{\r
1383             Ext.getDom(appendTo).appendChild(el);\r
1384         }\r
1385         if(useShim !== false && this.el.useShim !== false){\r
1386             var layer = new Ext.Layer({shadow:false, useDisplay:true, constrain:false}, el);\r
1387             layer.show();\r
1388             return layer;\r
1389         }else{\r
1390             return new Ext.Element(el);\r
1391         }\r
1392     },\r
1393 \r
1394     // private\r
1395     doAutoLoad : function(){\r
1396         this.body.load(\r
1397             typeof this.autoLoad == 'object' ?\r
1398                 this.autoLoad : {url: this.autoLoad});\r
1399     },\r
1400     \r
1401     /**\r
1402      * Retrieve a tool by id.\r
1403      * @param {String} id\r
1404      * @return {Object} tool\r
1405      */\r
1406     getTool: function(id) {\r
1407         return this.tools[id];\r
1408     }\r
1409 \r
1410 /**\r
1411  * @cfg {String} autoEl @hide\r
1412  */\r
1413 });\r
1414 Ext.reg('panel', Ext.Panel);\r