docs/source/Window.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-window-Window'>/**
  19 </span> * @class Ext.window.Window
  20  * @extends Ext.panel.Panel
  21  * &lt;p&gt;A specialized panel intended for use as an application window.  Windows are floated, {@link #resizable}, and
  22  * {@link #draggable} by default.  Windows can be {@link #maximizable maximized} to fill the viewport,
  23  * restored to their prior size, and can be {@link #minimize}d.&lt;/p&gt;
  24  * &lt;p&gt;Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
  25  * grouping, activation, to front, to back and other application-specific behavior.&lt;/p&gt;
  26  * &lt;p&gt;By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
  27  * specify {@link Ext.Component#renderTo renderTo}.&lt;/p&gt;
  28  * &lt;p&gt;&lt;b&gt;As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window
  29  * to size and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out
  30  * child Components in the required manner.&lt;/b&gt;&lt;/p&gt;
  31  * {@img Ext.window.Window/Ext.window.Window.png Window component}
  32  * Example:&lt;code&gt;&lt;pre&gt;
  33 Ext.create('Ext.window.Window', {
  34     title: 'Hello',
  35     height: 200,
  36     width: 400,
  37     layout: 'fit',
  38     items: {  // Let's put an empty grid in just to illustrate fit layout
  39         xtype: 'grid',
  40         border: false,
  41         columns: [{header: 'World'}],                 // One header just for show. There's no data,
  42         store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
  43     }
  44 }).show();
  45 &lt;/pre&gt;&lt;/code&gt;
  46  */
  47 Ext.define('Ext.window.Window', {
  48     extend: 'Ext.panel.Panel',
  49
  50     alternateClassName: 'Ext.Window',
  51
  52     requires: ['Ext.util.ComponentDragger', 'Ext.util.Region', 'Ext.EventManager'],
  53
  54     alias: 'widget.window',
  55
  56 <span id='Ext-window-Window-cfg-x'>    /**
  57 </span>     * @cfg {Number} x
  58      * The X position of the left edge of the window on initial showing. Defaults to centering the Window within
  59      * the width of the Window's container {@link Ext.core.Element Element) (The Element that the Window is rendered to).
  60      */
  61 <span id='Ext-window-Window-cfg-y'>    /**
  62 </span>     * @cfg {Number} y
  63      * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within
  64      * the height of the Window's container {@link Ext.core.Element Element) (The Element that the Window is rendered to).
  65      */
  66 <span id='Ext-window-Window-cfg-modal'>    /**
  67 </span>     * @cfg {Boolean} modal
  68      * True to make the window modal and mask everything behind it when displayed, false to display it without
  69      * restricting access to other UI elements (defaults to false).
  70      */
  71 <span id='Ext-window-Window-cfg-animateTarget'>    /**
  72 </span>     * @cfg {String/Element} animateTarget
  73      * Id or element from which the window should animate while opening (defaults to null with no animation).
  74      */
  75 <span id='Ext-window-Window-cfg-defaultFocus'>    /**
  76 </span>     * @cfg {String/Number/Component} defaultFocus
  77      * &lt;p&gt;Specifies a Component to receive focus when this Window is focused.&lt;/p&gt;
  78      * &lt;p&gt;This may be one of:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
  79      * &lt;li&gt;The index of a footer Button.&lt;/li&gt;
  80      * &lt;li&gt;The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.&lt;/li&gt;
  81      * &lt;li&gt;A Component.&lt;/li&gt;
  82      * &lt;/ul&gt;&lt;/div&gt;
  83      */
  84 <span id='Ext-window-Window-cfg-onEsc'>    /**
  85 </span>     * @cfg {Function} onEsc
  86      * Allows override of the built-in processing for the escape key. Default action
  87      * is to close the Window (performing whatever action is specified in {@link #closeAction}.
  88      * To prevent the Window closing when the escape key is pressed, specify this as
  89      * Ext.emptyFn (See {@link Ext#emptyFn Ext.emptyFn}).
  90      */
  91 <span id='Ext-window-Window-cfg-collapsed'>    /**
  92 </span>     * @cfg {Boolean} collapsed
  93      * True to render the window collapsed, false to render it expanded (defaults to false). Note that if
  94      * {@link #expandOnShow} is true (the default) it will override the &lt;code&gt;collapsed&lt;/code&gt; config and the window
  95      * will always be expanded when shown.
  96      */
  97 <span id='Ext-window-Window-cfg-maximized'>    /**
  98 </span>     * @cfg {Boolean} maximized
  99      * True to initially display the window in a maximized state. (Defaults to false).
 100      */
 101
 102 <span id='Ext-window-Window-cfg-baseCls'>    /**
 103 </span>    * @cfg {String} baseCls
 104     * The base CSS class to apply to this panel's element (defaults to 'x-window').
 105     */
 106     baseCls: Ext.baseCSSPrefix + 'window',
 107
 108 <span id='Ext-window-Window-cfg-resizable'>    /**
 109 </span>     * @cfg {Mixed} resizable
 110      * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to allow user resizing at each edge and corner of the window, false to disable
 111      * resizing (defaults to true).&lt;/p&gt;
 112      * &lt;p&gt;This may also be specified as a config object to &lt;/p&gt;
 113      */
 114     resizable: true,
 115
 116 <span id='Ext-window-Window-cfg-draggable'>    /**
 117 </span>     * @cfg {Boolean} draggable
 118      * &lt;p&gt;True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true).  Note
 119      * that by default the window will be centered in the viewport, so if dragging is disabled the window may need
 120      * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).&lt;p&gt;
 121      */
 122     draggable: true,
 123
 124 <span id='Ext-window-Window-cfg-constrain'>    /**
 125 </span>     * @cfg {Boolean} constrain
 126      * True to constrain the window within its containing element, false to allow it to fall outside of its
 127      * containing element. By default the window will be rendered to document.body.  To render and constrain the
 128      * window within another element specify {@link #renderTo}.
 129      * (defaults to false).  Optionally the header only can be constrained using {@link #constrainHeader}.
 130      */
 131     constrain: false,
 132
 133 <span id='Ext-window-Window-cfg-constrainHeader'>    /**
 134 </span>     * @cfg {Boolean} constrainHeader
 135      * True to constrain the window header within its containing element (allowing the window body to fall outside
 136      * of its containing element) or false to allow the header to fall outside its containing element (defaults to
 137      * false). Optionally the entire window can be constrained using {@link #constrain}.
 138      */
 139     constrainHeader: false,
 140
 141 <span id='Ext-window-Window-cfg-plain'>    /**
 142 </span>     * @cfg {Boolean} plain
 143      * True to render the window body with a transparent background so that it will blend into the framing
 144      * elements, false to add a lighter background color to visually highlight the body element and separate it
 145      * more distinctly from the surrounding frame (defaults to false).
 146      */
 147     plain: false,
 148
 149 <span id='Ext-window-Window-cfg-minimizable'>    /**
 150 </span>     * @cfg {Boolean} minimizable
 151      * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
 152      * and disallow minimizing the window (defaults to false).  Note that this button provides no implementation --
 153      * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a
 154      * custom minimize behavior implemented for this option to be useful.
 155      */
 156     minimizable: false,
 157
 158 <span id='Ext-window-Window-cfg-maximizable'>    /**
 159 </span>     * @cfg {Boolean} maximizable
 160      * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
 161      * and disallow maximizing the window (defaults to false).  Note that when a window is maximized, the tool button
 162      * will automatically change to a 'restore' button with the appropriate behavior already built-in that will
 163      * restore the window to its previous size.
 164      */
 165     maximizable: false,
 166
 167     // inherit docs
 168     minHeight: 100,
 169
 170     // inherit docs
 171     minWidth: 200,
 172
 173 <span id='Ext-window-Window-cfg-expandOnShow'>    /**
 174 </span>     * @cfg {Boolean} expandOnShow
 175      * True to always expand the window when it is displayed, false to keep it in its current state (which may be
 176      * {@link #collapsed}) when displayed (defaults to true).
 177      */
 178     expandOnShow: true,
 179
 180     // inherited docs, same default
 181     collapsible: false,
 182
 183 <span id='Ext-window-Window-cfg-closable'>    /**
 184 </span>     * @cfg {Boolean} closable
 185      * &lt;p&gt;True to display the 'close' tool button and allow the user to close the window, false to
 186      * hide the button and disallow closing the window (defaults to &lt;code&gt;true&lt;/code&gt;).&lt;/p&gt;
 187      * &lt;p&gt;By default, when close is requested by either clicking the close button in the header
 188      * or pressing ESC when the Window has focus, the {@link #close} method will be called. This
 189      * will &lt;i&gt;{@link Ext.Component#destroy destroy}&lt;/i&gt; the Window and its content meaning that
 190      * it may not be reused.&lt;/p&gt;
 191      * &lt;p&gt;To make closing a Window &lt;i&gt;hide&lt;/i&gt; the Window so that it may be reused, set
 192      * {@link #closeAction} to 'hide'.&lt;/p&gt;
 193      */
 194     closable: true,
 195
 196 <span id='Ext-window-Window-cfg-hidden'>    /**
 197 </span>     * @cfg {Boolean} hidden
 198      * Render this Window hidden (default is &lt;code&gt;true&lt;/code&gt;). If &lt;code&gt;true&lt;/code&gt;, the
 199      * {@link #hide} method will be called internally.
 200      */
 201     hidden: true,
 202
 203     // Inherit docs from Component. Windows render to the body on first show.
 204     autoRender: true,
 205
 206     // Inherit docs from Component. Windows hide using visibility.
 207     hideMode: 'visibility',
 208
 209 <span id='Ext-window-Window-cfg-floating'>    /** @cfg {Boolean} floating @hide Windows are always floating*/
 210 </span>    floating: true,
 211
 212     ariaRole: 'alertdialog',
 213
 214     itemCls: 'x-window-item',
 215
 216     overlapHeader: true,
 217
 218     ignoreHeaderBorderManagement: true,
 219
 220     // private
 221     initComponent: function() {
 222         var me = this;
 223         me.callParent();
 224         me.addEvents(
 225 <span id='Ext-window-Window-event-activate'>            /**
 226 </span>             * @event activate
 227              * Fires after the window has been visually activated via {@link #setActive}.
 228              * @param {Ext.window.Window} this
 229              */
 230 <span id='Ext-window-Window-event-deactivate'>            /**
 231 </span>             * @event deactivate
 232              * Fires after the window has been visually deactivated via {@link #setActive}.
 233              * @param {Ext.window.Window} this
 234              */
 235 <span id='Ext-window-Window-event-resize'>            /**
 236 </span>             * @event resize
 237              * Fires after the window has been resized.
 238              * @param {Ext.window.Window} this
 239              * @param {Number} width The window's new width
 240              * @param {Number} height The window's new height
 241              */
 242             'resize',
 243 <span id='Ext-window-Window-event-maximize'>            /**
 244 </span>             * @event maximize
 245              * Fires after the window has been maximized.
 246              * @param {Ext.window.Window} this
 247              */
 248             'maximize',
 249 <span id='Ext-window-Window-event-minimize'>            /**
 250 </span>             * @event minimize
 251              * Fires after the window has been minimized.
 252              * @param {Ext.window.Window} this
 253              */
 254             'minimize',
 255 <span id='Ext-window-Window-event-restore'>            /**
 256 </span>             * @event restore
 257              * Fires after the window has been restored to its original size after being maximized.
 258              * @param {Ext.window.Window} this
 259              */
 260             'restore'
 261         );
 262
 263         if (me.plain) {
 264             me.addClsWithUI('plain');
 265         }
 266
 267         if (me.modal) {
 268             me.ariaRole = 'dialog';
 269         }
 270     },
 271
 272     // State Management
 273     // private
 274
 275     initStateEvents: function(){
 276         var events = this.stateEvents;
 277         // push on stateEvents if they don't exist
 278         Ext.each(['maximize', 'restore', 'resize', 'dragend'], function(event){
 279             if (Ext.Array.indexOf(events, event)) {
 280                 events.push(event);
 281             }
 282         });
 283         this.callParent();
 284     },
 285
 286     getState: function() {
 287         var me = this,
 288             state = me.callParent() || {},
 289             maximized = !!me.maximized;
 290
 291         state.maximized = maximized;
 292         Ext.apply(state, {
 293             size: maximized ? me.restoreSize : me.getSize(),
 294             pos: maximized ? me.restorePos : me.getPosition()
 295         });
 296         return state;
 297     },
 298
 299     applyState: function(state){
 300         var me = this;
 301
 302         if (state) {
 303             me.maximized = state.maximized;
 304             if (me.maximized) {
 305                 me.hasSavedRestore = true;
 306                 me.restoreSize = state.size;
 307                 me.restorePos = state.pos;
 308             } else {
 309                 Ext.apply(me, {
 310                     width: state.size.width,
 311                     height: state.size.height,
 312                     x: state.pos[0],
 313                     y: state.pos[1]
 314                 });
 315             }
 316         }
 317     },
 318
 319     // private
 320     onMouseDown: function () {
 321         if (this.floating) {
 322             this.toFront();
 323         }
 324     },
 325
 326     // private
 327     onRender: function(ct, position) {
 328         var me = this;
 329         me.callParent(arguments);
 330         me.focusEl = me.el;
 331
 332         // Double clicking a header will toggleMaximize
 333         if (me.maximizable) {
 334             me.header.on({
 335                 dblclick: {
 336                     fn: me.toggleMaximize,
 337                     element: 'el',
 338                     scope: me
 339                 }
 340             });
 341         }
 342     },
 343
 344     // private
 345     afterRender: function() {
 346         var me = this,
 347             hidden = me.hidden,
 348             keyMap;
 349
 350         me.hidden = false;
 351         // Component's afterRender sizes and positions the Component
 352         me.callParent();
 353         me.hidden = hidden;
 354
 355         // Create the proxy after the size has been applied in Component.afterRender
 356         me.proxy = me.getProxy();
 357
 358         // clickToRaise
 359         me.mon(me.el, 'mousedown', me.onMouseDown, me);
 360
 361         // Initialize
 362         if (me.maximized) {
 363             me.maximized = false;
 364             me.maximize();
 365         }
 366
 367         if (me.closable) {
 368             keyMap = me.getKeyMap();
 369             keyMap.on(27, me.onEsc, me);
 370
 371             //if (hidden) { ? would be consistent w/before/afterShow...
 372                 keyMap.disable();
 373             //}
 374         }
 375
 376         if (!hidden) {
 377             me.syncMonitorWindowResize();
 378             me.doConstrain();
 379         }
 380     },
 381
 382 <span id='Ext-window-Window-method-initDraggable'>    /**
 383 </span>     * @private
 384      * @override
 385      * Override Component.initDraggable.
 386      * Window uses the header element as the delegate.
 387      */
 388     initDraggable: function() {
 389         var me = this,
 390             ddConfig;
 391
 392         if (!me.header) {
 393             me.updateHeader(true);
 394         }
 395
 396         /*
 397          * Check the header here again. If for whatever reason it wasn't created in
 398          * updateHeader (preventHeader) then we'll just ignore the rest since the
 399          * header acts as the drag handle.
 400          */
 401         if (me.header) {
 402             ddConfig = Ext.applyIf({
 403                 el: me.el,
 404                 delegate: '#' + me.header.id
 405             }, me.draggable);
 406
 407             // Add extra configs if Window is specified to be constrained
 408             if (me.constrain || me.constrainHeader) {
 409                 ddConfig.constrain = me.constrain;
 410                 ddConfig.constrainDelegate = me.constrainHeader;
 411                 ddConfig.constrainTo = me.constrainTo || me.container;
 412             }
 413
 414 <span id='Ext-window-Window-property-dd'>            /**
 415 </span>             * &lt;p&gt;If this Window is configured {@link #draggable}, this property will contain
 416              * an instance of {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker})
 417              * which handles dragging the Window's DOM Element, and constraining according to the {@link #constrain}
 418              * and {@link #constrainHeader} .&lt;/p&gt;
 419              * &lt;p&gt;This has implementations of &lt;code&gt;onBeforeStart&lt;/code&gt;, &lt;code&gt;onDrag&lt;/code&gt; and &lt;code&gt;onEnd&lt;/code&gt;
 420              * which perform the dragging action. If extra logic is needed at these points, use
 421              * {@link Ext.Function#createInterceptor createInterceptor} or {@link Ext.Function#createSequence createSequence} to
 422              * augment the existing implementations.&lt;/p&gt;
 423              * @type Ext.util.ComponentDragger
 424              * @property dd
 425              */
 426             me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
 427             me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
 428         }
 429     },
 430
 431     // private
 432     onEsc: function(k, e) {
 433         e.stopEvent();
 434         this[this.closeAction]();
 435     },
 436
 437     // private
 438     beforeDestroy: function() {
 439         var me = this;
 440         if (me.rendered) {
 441             delete this.animateTarget;
 442             me.hide();
 443             Ext.destroy(
 444                 me.keyMap
 445             );
 446         }
 447         me.callParent();
 448     },
 449
 450 <span id='Ext-window-Window-method-addTools'>    /**
 451 </span>     * @private
 452      * @override
 453      * Contribute class-specific tools to the header.
 454      * Called by Panel's initTools.
 455      */
 456     addTools: function() {
 457         var me = this;
 458
 459         // Call Panel's initTools
 460         me.callParent();
 461
 462         if (me.minimizable) {
 463             me.addTool({
 464                 type: 'minimize',
 465                 handler: Ext.Function.bind(me.minimize, me, [])
 466             });
 467         }
 468         if (me.maximizable) {
 469             me.addTool({
 470                 type: 'maximize',
 471                 handler: Ext.Function.bind(me.maximize, me, [])
 472             });
 473             me.addTool({
 474                 type: 'restore',
 475                 handler: Ext.Function.bind(me.restore, me, []),
 476                 hidden: true
 477             });
 478         }
 479     },
 480
 481 <span id='Ext-window-Window-method-getFocusEl'>    /**
 482 </span>     * Gets the configured default focus item.  If a {@link #defaultFocus} is set, it will receive focus, otherwise the
 483      * Container itself will receive focus.
 484      */
 485     getFocusEl: function() {
 486         var me = this,
 487             f = me.focusEl,
 488             defaultComp = me.defaultButton || me.defaultFocus,
 489             t = typeof db,
 490             el,
 491             ct;
 492
 493         if (Ext.isDefined(defaultComp)) {
 494             if (Ext.isNumber(defaultComp)) {
 495                 f = me.query('button')[defaultComp];
 496             } else if (Ext.isString(defaultComp)) {
 497                 f = me.down('#' + defaultComp);
 498             } else {
 499                 f = defaultComp;
 500             }
 501         }
 502         return f || me.focusEl;
 503     },
 504
 505     // private
 506     beforeShow: function() {
 507         this.callParent();
 508
 509         if (this.expandOnShow) {
 510             this.expand(false);
 511         }
 512     },
 513
 514     // private
 515     afterShow: function(animateTarget) {
 516         var me = this,
 517             animating = animateTarget || me.animateTarget;
 518
 519
 520         if (animating) {
 521             /*
 522              * If we're animating, constrain the positioning before calling the
 523              * superclass, otherwise we'll be animating to the unconstrained
 524              * window position.
 525              */
 526             me.doConstrain();
 527         }
 528         // Perform superclass's afterShow tasks
 529         // Which might include animating a proxy from an animTarget
 530         me.callParent(arguments);
 531
 532         if (me.maximized) {
 533             me.fitContainer();
 534         }
 535
 536         me.syncMonitorWindowResize();
 537         if (!animating) {
 538             me.doConstrain();
 539         }
 540
 541         if (me.keyMap) {
 542             me.keyMap.enable();
 543         }
 544     },
 545
 546     // private
 547     doClose: function() {
 548         var me = this;
 549
 550         // immediate close
 551         if (me.hidden) {
 552             me.fireEvent('close', me);
 553             me[me.closeAction]();
 554         } else {
 555             // close after hiding
 556             me.hide(me.animTarget, me.doClose, me);
 557         }
 558     },
 559
 560     // private
 561     afterHide: function() {
 562         var me = this;
 563
 564         // No longer subscribe to resizing now that we're hidden
 565         me.syncMonitorWindowResize();
 566
 567         // Turn off keyboard handling once window is hidden
 568         if (me.keyMap) {
 569             me.keyMap.disable();
 570         }
 571
 572         // Perform superclass's afterHide tasks.
 573         me.callParent(arguments);
 574     },
 575
 576     // private
 577     onWindowResize: function() {
 578         if (this.maximized) {
 579             this.fitContainer();
 580         }
 581         this.doConstrain();
 582     },
 583
 584 <span id='Ext-window-Window-method-minimize'>    /**
 585 </span>     * Placeholder method for minimizing the window.  By default, this method simply fires the {@link #minimize} event
 586      * since the behavior of minimizing a window is application-specific.  To implement custom minimize behavior,
 587      * either the minimize event can be handled or this method can be overridden.
 588      * @return {Ext.window.Window} this
 589      */
 590     minimize: function() {
 591         this.fireEvent('minimize', this);
 592         return this;
 593     },
 594
 595     afterCollapse: function() {
 596         var me = this;
 597
 598         if (me.maximizable) {
 599             me.tools.maximize.hide();
 600             me.tools.restore.hide();
 601         }
 602         if (me.resizer) {
 603             me.resizer.disable();
 604         }
 605         me.callParent(arguments);
 606     },
 607
 608     afterExpand: function() {
 609         var me = this;
 610
 611         if (me.maximized) {
 612             me.tools.restore.show();
 613         } else if (me.maximizable) {
 614             me.tools.maximize.show();
 615         }
 616         if (me.resizer) {
 617             me.resizer.enable();
 618         }
 619         me.callParent(arguments);
 620     },
 621
 622 <span id='Ext-window-Window-method-maximize'>    /**
 623 </span>     * Fits the window within its current container and automatically replaces
 624      * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button.
 625      * Also see {@link #toggleMaximize}.
 626      * @return {Ext.window.Window} this
 627      */
 628     maximize: function() {
 629         var me = this;
 630
 631         if (!me.maximized) {
 632             me.expand(false);
 633             if (!me.hasSavedRestore) {
 634                 me.restoreSize = me.getSize();
 635                 me.restorePos = me.getPosition(true);
 636             }
 637             if (me.maximizable) {
 638                 me.tools.maximize.hide();
 639                 me.tools.restore.show();
 640             }
 641             me.maximized = true;
 642             me.el.disableShadow();
 643
 644             if (me.dd) {
 645                 me.dd.disable();
 646             }
 647             if (me.collapseTool) {
 648                 me.collapseTool.hide();
 649             }
 650             me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
 651             me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
 652
 653             me.syncMonitorWindowResize();
 654             me.setPosition(0, 0);
 655             me.fitContainer();
 656             me.fireEvent('maximize', me);
 657         }
 658         return me;
 659     },
 660
 661 <span id='Ext-window-Window-method-restore'>    /**
 662 </span>     * Restores a {@link #maximizable maximized}  window back to its original
 663      * size and position prior to being maximized and also replaces
 664      * the 'restore' tool button with the 'maximize' tool button.
 665      * Also see {@link #toggleMaximize}.
 666      * @return {Ext.window.Window} this
 667      */
 668     restore: function() {
 669         var me = this,
 670             tools = me.tools;
 671
 672         if (me.maximized) {
 673             delete me.hasSavedRestore;
 674             me.removeCls(Ext.baseCSSPrefix + 'window-maximized');
 675
 676             // Toggle tool visibility
 677             if (tools.restore) {
 678                 tools.restore.hide();
 679             }
 680             if (tools.maximize) {
 681                 tools.maximize.show();
 682             }
 683             if (me.collapseTool) {
 684                 me.collapseTool.show();
 685             }
 686
 687             // Restore the position/sizing
 688             me.setPosition(me.restorePos);
 689             me.setSize(me.restoreSize);
 690
 691             // Unset old position/sizing
 692             delete me.restorePos;
 693             delete me.restoreSize;
 694
 695             me.maximized = false;
 696
 697             me.el.enableShadow(true);
 698
 699             // Allow users to drag and drop again
 700             if (me.dd) {
 701                 me.dd.enable();
 702             }
 703
 704             me.container.removeCls(Ext.baseCSSPrefix + 'window-maximized-ct');
 705
 706             me.syncMonitorWindowResize();
 707             me.doConstrain();
 708             me.fireEvent('restore', me);
 709         }
 710         return me;
 711     },
 712
 713 <span id='Ext-window-Window-method-syncMonitorWindowResize'>    /**
 714 </span>     * Synchronizes the presence of our listener for window resize events. This method
 715      * should be called whenever this status might change.
 716      * @private
 717      */
 718     syncMonitorWindowResize: function () {
 719         var me = this,
 720             currentlyMonitoring = me._monitoringResize,
 721             // all the states where we should be listening to window resize:
 722             yes = me.monitorResize || me.constrain || me.constrainHeader || me.maximized,
 723             // all the states where we veto this:
 724             veto = me.hidden || me.destroying || me.isDestroyed;
 725
 726         if (yes &amp;&amp; !veto) {
 727             // we should be listening...
 728             if (!currentlyMonitoring) {
 729                 // but we aren't, so set it up
 730                 Ext.EventManager.onWindowResize(me.onWindowResize, me);
 731                 me._monitoringResize = true;
 732             }
 733         } else if (currentlyMonitoring) {
 734             // we should not be listening, but we are, so tear it down
 735             Ext.EventManager.removeResizeListener(me.onWindowResize, me);
 736             me._monitoringResize = false;
 737         }
 738     },
 739
 740 <span id='Ext-window-Window-method-toggleMaximize'>    /**
 741 </span>     * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
 742      * state of the window.
 743      * @return {Ext.window.Window} this
 744      */
 745     toggleMaximize: function() {
 746         return this[this.maximized ? 'restore': 'maximize']();
 747     }
 748
 749 <span id='Ext-window-Window-cfg-autoWidth'>    /**
 750 </span>     * @cfg {Boolean} autoWidth @hide
 751      * Absolute positioned element and therefore cannot support autoWidth.
 752      * A width is a required configuration.
 753      **/
 754 });</pre>
 755 </body>
 756 </html>