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