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