Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / Window.html
diff --git a/docs/source/Window.html b/docs/source/Window.html
new file mode 100644 (file)
index 0000000..91d0a85
--- /dev/null
@@ -0,0 +1,945 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.Window"></div>/**
+ * @class Ext.Window
+ * @extends Ext.Panel
+ * <p>A specialized panel intended for use as an application window.  Windows are floated, {@link #resizable}, and
+ * {@link #draggable} by default.  Windows can be {@link #maximizable maximized} to fill the viewport,
+ * restored to their prior size, and can be {@link #minimize}d.</p>
+ * <p>Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide 
+ * grouping, activation, to front, to back and other application-specific behavior.</p>
+ * <p>By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
+ * specify {@link Ext.Component#renderTo renderTo}.</p>
+ * <p><b>Note:</b> By default, the <code>{@link #closable close}</code> header tool <i>destroys</i> the Window resulting in
+ * destruction of any child Components. This makes the Window object, and all its descendants <b>unusable</b>. To enable
+ * re-use of a Window, use <b><code>{@link #closeAction closeAction: 'hide'}</code></b>.</p>
+ * @constructor
+ * @param {Object} config The config object
+ * @xtype window
+ */
+Ext.Window = Ext.extend(Ext.Panel, {
+    <div id="cfg-Ext.Window-x"></div>/**
+     * @cfg {Number} x
+     * The X position of the left edge of the window on initial showing. Defaults to centering the Window within
+     * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
+     */
+    <div id="cfg-Ext.Window-y"></div>/**
+     * @cfg {Number} y
+     * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within
+     * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
+     */
+    <div id="cfg-Ext.Window-modal"></div>/**
+     * @cfg {Boolean} modal
+     * True to make the window modal and mask everything behind it when displayed, false to display it without
+     * restricting access to other UI elements (defaults to false).
+     */
+    <div id="cfg-Ext.Window-animateTarget"></div>/**
+     * @cfg {String/Element} animateTarget
+     * Id or element from which the window should animate while opening (defaults to null with no animation).
+     */
+    <div id="cfg-Ext.Window-resizeHandles"></div>/**
+     * @cfg {String} resizeHandles
+     * A valid {@link Ext.Resizable} handles config string (defaults to 'all').  Only applies when resizable = true.
+     */
+    <div id="cfg-Ext.Window-manager"></div>/**
+     * @cfg {Ext.WindowGroup} manager
+     * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}).
+     */
+    <div id="cfg-Ext.Window-defaultButton"></div>/**
+    * @cfg {String/Number/Button} defaultButton
+    * The id / index of a button or a button instance to focus when this window received the focus.
+    */
+    <div id="cfg-Ext.Window-onEsc"></div>/**
+    * @cfg {Function} onEsc
+    * Allows override of the built-in processing for the escape key. Default action
+    * is to close the Window (performing whatever action is specified in {@link #closeAction}.
+    * To prevent the Window closing when the escape key is pressed, specify this as
+    * Ext.emptyFn (See {@link Ext#emptyFn}).
+    */
+    <div id="cfg-Ext.Window-collapsed"></div>/**
+     * @cfg {Boolean} collapsed
+     * True to render the window collapsed, false to render it expanded (defaults to false). Note that if 
+     * {@link #expandOnShow} is true (the default) it will override the <tt>collapsed</tt> config and the window 
+     * will always be expanded when shown.
+     */
+    <div id="cfg-Ext.Window-maximized"></div>/**
+     * @cfg {Boolean} maximized
+     * True to initially display the window in a maximized state. (Defaults to false).
+     */
+    
+    <div id="cfg-Ext.Window-baseCls"></div>/**
+    * @cfg {String} baseCls
+    * The base CSS class to apply to this panel's element (defaults to 'x-window').
+    */
+    baseCls : 'x-window',
+    <div id="cfg-Ext.Window-resizable"></div>/**
+     * @cfg {Boolean} resizable
+     * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).
+     */
+    resizable : true,
+    <div id="cfg-Ext.Window-draggable"></div>/**
+     * @cfg {Boolean} draggable
+     * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true).  Note
+     * that by default the window will be centered in the viewport, so if dragging is disabled the window may need
+     * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).
+     */
+    draggable : true,
+    <div id="cfg-Ext.Window-closable"></div>/**
+     * @cfg {Boolean} closable
+     * <p>True to display the 'close' tool button and allow the user to close the window, false to
+     * hide the button and disallow closing the window (defaults to true).</p>
+     * <p>By default, when close is requested by either clicking the close button in the header
+     * or pressing ESC when the Window has focus, the {@link #close} method will be called. This
+     * will <i>{@link Ext.Component#destroy destroy}</i> the Window and its content meaning that
+     * it may not be reused.</p>
+     * <p>To make closing a Window <i>hide</i> the Window so that it may be reused, set
+     * {@link #closeAction} to 'hide'.
+     */
+    closable : true,
+    <div id="cfg-Ext.Window-closeAction"></div>/**
+     * @cfg {String} closeAction
+     * <p>The action to take when the close header tool is clicked:
+     * <div class="mdetail-params"><ul>
+     * <li><b><code>'{@link #close}'</code></b> : <b>Default</b><div class="sub-desc">
+     * {@link #close remove} the window from the DOM and {@link Ext.Component#destroy destroy}
+     * it and all descendant Components. The window will <b>not</b> be available to be
+     * redisplayed via the {@link #show} method.
+     * </div></li>
+     * <li><b><code>'{@link #hide}'</code></b> : <div class="sub-desc">
+     * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
+     * The window will be available to be redisplayed via the {@link #show} method.
+     * </div></li>
+     * </ul></div>
+     * <p><b>Note:</b> This setting does not affect the {@link #close} method
+     * which will always {@link Ext.Component#destroy destroy} the window. To
+     * programatically <i>hide</i> a window, call {@link #hide}.</p>
+     */
+    closeAction : 'close',
+    <div id="cfg-Ext.Window-constrain"></div>/**
+     * @cfg {Boolean} constrain
+     * True to constrain the window within its containing element, false to allow it to fall outside of its
+     * containing element. By default the window will be rendered to document.body.  To render and constrain the 
+     * window within another element specify {@link #renderTo}.
+     * (defaults to false).  Optionally the header only can be constrained using {@link #constrainHeader}.
+     */
+    constrain : false,
+    <div id="cfg-Ext.Window-constrainHeader"></div>/**
+     * @cfg {Boolean} constrainHeader
+     * True to constrain the window header within its containing element (allowing the window body to fall outside 
+     * of its containing element) or false to allow the header to fall outside its containing element (defaults to 
+     * false). Optionally the entire window can be constrained using {@link #constrain}.
+     */
+    constrainHeader : false,
+    <div id="cfg-Ext.Window-plain"></div>/**
+     * @cfg {Boolean} plain
+     * True to render the window body with a transparent background so that it will blend into the framing
+     * elements, false to add a lighter background color to visually highlight the body element and separate it
+     * more distinctly from the surrounding frame (defaults to false).
+     */
+    plain : false,
+    <div id="cfg-Ext.Window-minimizable"></div>/**
+     * @cfg {Boolean} minimizable
+     * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
+     * and disallow minimizing the window (defaults to false).  Note that this button provides no implementation --
+     * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a
+     * custom minimize behavior implemented for this option to be useful.
+     */
+    minimizable : false,
+    <div id="cfg-Ext.Window-maximizable"></div>/**
+     * @cfg {Boolean} maximizable
+     * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
+     * and disallow maximizing the window (defaults to false).  Note that when a window is maximized, the tool button
+     * will automatically change to a 'restore' button with the appropriate behavior already built-in that will
+     * restore the window to its previous size.
+     */
+    maximizable : false,
+    <div id="cfg-Ext.Window-minHeight"></div>/**
+     * @cfg {Number} minHeight
+     * The minimum height in pixels allowed for this window (defaults to 100).  Only applies when resizable = true.
+     */
+    minHeight : 100,
+    <div id="cfg-Ext.Window-minWidth"></div>/**
+     * @cfg {Number} minWidth
+     * The minimum width in pixels allowed for this window (defaults to 200).  Only applies when resizable = true.
+     */
+    minWidth : 200,
+    <div id="cfg-Ext.Window-expandOnShow"></div>/**
+     * @cfg {Boolean} expandOnShow
+     * True to always expand the window when it is displayed, false to keep it in its current state (which may be
+     * {@link #collapsed}) when displayed (defaults to true).
+     */
+    expandOnShow : true,
+
+    // inherited docs, same default
+    collapsible : false,
+
+    <div id="cfg-Ext.Window-initHidden"></div>/**
+     * @cfg {Boolean} initHidden
+     * True to hide the window until show() is explicitly called (defaults to true).
+     */
+    initHidden : true,
+    <div id="cfg-Ext.Window-monitorResize"></div>/**
+    * @cfg {Boolean} monitorResize @hide
+    * This is automatically managed based on the value of constrain and constrainToHeader
+    */
+    monitorResize : true,
+
+    // The following configs are set to provide the basic functionality of a window.
+    // Changing them would require additional code to handle correctly and should
+    // usually only be done in subclasses that can provide custom behavior.  Changing them
+    // may have unexpected or undesirable results.
+    <div id="cfg-Ext.Window-elements"></div>/** @cfg {String} elements @hide */
+    elements : 'header,body',
+    <div id="cfg-Ext.Window-frame"></div>/** @cfg {Boolean} frame @hide */
+    frame : true,
+    <div id="cfg-Ext.Window-floating"></div>/** @cfg {Boolean} floating @hide */
+    floating : true,
+
+    // private
+    initComponent : function(){
+        Ext.Window.superclass.initComponent.call(this);
+        this.addEvents(
+            <div id="event-Ext.Window-activate"></div>/**
+             * @event activate
+             * Fires after the window has been visually activated via {@link setActive}.
+             * @param {Ext.Window} this
+             */
+            <div id="event-Ext.Window-deactivate"></div>/**
+             * @event deactivate
+             * Fires after the window has been visually deactivated via {@link setActive}.
+             * @param {Ext.Window} this
+             */
+            <div id="event-Ext.Window-resize"></div>/**
+             * @event resize
+             * Fires after the window has been resized.
+             * @param {Ext.Window} this
+             * @param {Number} width The window's new width
+             * @param {Number} height The window's new height
+             */
+            'resize',
+            <div id="event-Ext.Window-maximize"></div>/**
+             * @event maximize
+             * Fires after the window has been maximized.
+             * @param {Ext.Window} this
+             */
+            'maximize',
+            <div id="event-Ext.Window-minimize"></div>/**
+             * @event minimize
+             * Fires after the window has been minimized.
+             * @param {Ext.Window} this
+             */
+            'minimize',
+            <div id="event-Ext.Window-restore"></div>/**
+             * @event restore
+             * Fires after the window has been restored to its original size after being maximized.
+             * @param {Ext.Window} this
+             */
+            'restore'
+        );
+        if(this.initHidden === false){
+            this.show();
+        }else{
+            this.hidden = true;
+        }
+    },
+
+    // private
+    getState : function(){
+        return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true));
+    },
+
+    // private
+    onRender : function(ct, position){
+        Ext.Window.superclass.onRender.call(this, ct, position);
+
+        if(this.plain){
+            this.el.addClass('x-window-plain');
+        }
+
+        // this element allows the Window to be focused for keyboard events
+        this.focusEl = this.el.createChild({
+                    tag: 'a', href:'#', cls:'x-dlg-focus',
+                    tabIndex:'-1', html: '&#160;'});
+        this.focusEl.swallowEvent('click', true);
+
+        this.proxy = this.el.createProxy('x-window-proxy');
+        this.proxy.enableDisplayMode('block');
+
+        if(this.modal){
+            this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom);
+            this.mask.enableDisplayMode('block');
+            this.mask.hide();
+            this.mon(this.mask, 'click', this.focus, this);
+        }
+        this.initTools();
+    },
+
+    // private
+    initEvents : function(){
+        Ext.Window.superclass.initEvents.call(this);
+        if(this.animateTarget){
+            this.setAnimateTarget(this.animateTarget);
+        }
+
+        if(this.resizable){
+            this.resizer = new Ext.Resizable(this.el, {
+                minWidth: this.minWidth,
+                minHeight:this.minHeight,
+                handles: this.resizeHandles || 'all',
+                pinned: true,
+                resizeElement : this.resizerAction
+            });
+            this.resizer.window = this;
+            this.mon(this.resizer, 'beforeresize', this.beforeResize, this);
+        }
+
+        if(this.draggable){
+            this.header.addClass('x-window-draggable');
+        }
+        this.mon(this.el, 'mousedown', this.toFront, this);
+        this.manager = this.manager || Ext.WindowMgr;
+        this.manager.register(this);
+        if(this.maximized){
+            this.maximized = false;
+            this.maximize();
+        }
+        if(this.closable){
+            var km = this.getKeyMap();
+            km.on(27, this.onEsc, this);
+            km.disable();
+        }
+    },
+
+    initDraggable : function(){
+        <div id="prop-Ext.Window-dd"></div>/**
+         * If this Window is configured {@link #draggable}, this property will contain
+         * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element.
+         * @type Ext.dd.DD
+         * @property dd
+         */
+        this.dd = new Ext.Window.DD(this);
+    },
+
+   // private
+    onEsc : function(){
+        this[this.closeAction]();
+    },
+
+    // private
+    beforeDestroy : function(){
+        if (this.rendered){
+            this.hide();
+          if(this.doAnchor){
+                Ext.EventManager.removeResizeListener(this.doAnchor, this);
+              Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
+            }
+            Ext.destroy(
+                this.focusEl,
+                this.resizer,
+                this.dd,
+                this.proxy,
+                this.mask
+            );
+        }
+        Ext.Window.superclass.beforeDestroy.call(this);
+    },
+
+    // private
+    onDestroy : function(){
+        if(this.manager){
+            this.manager.unregister(this);
+        }
+        Ext.Window.superclass.onDestroy.call(this);
+    },
+
+    // private
+    initTools : function(){
+        if(this.minimizable){
+            this.addTool({
+                id: 'minimize',
+                handler: this.minimize.createDelegate(this, [])
+            });
+        }
+        if(this.maximizable){
+            this.addTool({
+                id: 'maximize',
+                handler: this.maximize.createDelegate(this, [])
+            });
+            this.addTool({
+                id: 'restore',
+                handler: this.restore.createDelegate(this, []),
+                hidden:true
+            });
+            this.mon(this.header, 'dblclick', this.toggleMaximize, this);
+        }
+        if(this.closable){
+            this.addTool({
+                id: 'close',
+                handler: this[this.closeAction].createDelegate(this, [])
+            });
+        }
+    },
+
+    // private
+    resizerAction : function(){
+        var box = this.proxy.getBox();
+        this.proxy.hide();
+        this.window.handleResize(box);
+        return box;
+    },
+
+    // private
+    beforeResize : function(){
+        this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size?
+        this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40);
+        this.resizeBox = this.el.getBox();
+    },
+
+    // private
+    updateHandles : function(){
+        if(Ext.isIE && this.resizer){
+            this.resizer.syncHandleHeight();
+            this.el.repaint();
+        }
+    },
+
+    // private
+    handleResize : function(box){
+        var rz = this.resizeBox;
+        if(rz.x != box.x || rz.y != box.y){
+            this.updateBox(box);
+        }else{
+            this.setSize(box);
+        }
+        this.focus();
+        this.updateHandles();
+        this.saveState();
+        this.doLayout();
+        this.fireEvent('resize', this, box.width, box.height);
+    },
+
+    <div id="method-Ext.Window-focus"></div>/**
+     * Focuses the window.  If a defaultButton is set, it will receive focus, otherwise the
+     * window itself will receive focus.
+     */
+    focus : function(){
+        var f = this.focusEl, db = this.defaultButton, t = typeof db;
+        if(t != 'undefined'){
+            if(t == 'number' && this.fbar){
+                f = this.fbar.items.get(db);
+            }else if(t == 'string'){
+                f = Ext.getCmp(db);
+            }else{
+                f = db;
+            }
+        }
+        f = f || this.focusEl;
+        f.focus.defer(10, f);
+    },
+
+    <div id="method-Ext.Window-setAnimateTarget"></div>/**
+     * Sets the target element from which the window should animate while opening.
+     * @param {String/Element} el The target element or id
+     */
+    setAnimateTarget : function(el){
+        el = Ext.get(el);
+        this.animateTarget = el;
+    },
+
+    // private
+    beforeShow : function(){
+        delete this.el.lastXY;
+        delete this.el.lastLT;
+        if(this.x === undefined || this.y === undefined){
+            var xy = this.el.getAlignToXY(this.container, 'c-c');
+            var pos = this.el.translatePoints(xy[0], xy[1]);
+            this.x = this.x === undefined? pos.left : this.x;
+            this.y = this.y === undefined? pos.top : this.y;
+        }
+        this.el.setLeftTop(this.x, this.y);
+
+        if(this.expandOnShow){
+            this.expand(false);
+        }
+
+        if(this.modal){
+            Ext.getBody().addClass('x-body-masked');
+            this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+            this.mask.show();
+        }
+    },
+
+    <div id="method-Ext.Window-show"></div>/**
+     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
+     * @param {String/Element} animateTarget (optional) The target element or id from which the window should
+     * animate while opening (defaults to null with no animation)
+     * @param {Function} callback (optional) A callback function to call after the window is displayed
+     * @param {Object} scope (optional) The scope in which to execute the callback
+     * @return {Ext.Window} this
+     */
+    show : function(animateTarget, cb, scope){
+        if(!this.rendered){
+            this.render(Ext.getBody());
+        }
+        if(this.hidden === false){
+            this.toFront();
+            return this;
+        }
+        if(this.fireEvent('beforeshow', this) === false){
+            return this;
+        }
+        if(cb){
+            this.on('show', cb, scope, {single:true});
+        }
+        this.hidden = false;
+        if(animateTarget !== undefined){
+            this.setAnimateTarget(animateTarget);
+        }
+        this.beforeShow();
+        if(this.animateTarget){
+            this.animShow();
+        }else{
+            this.afterShow();
+        }
+        return this;
+    },
+
+    // private
+    afterShow : function(isAnim){
+        this.proxy.hide();
+        this.el.setStyle('display', 'block');
+        this.el.show();
+        if(this.maximized){
+            this.fitContainer();
+        }
+        if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
+            this.cascade(this.setAutoScroll);
+        }
+
+        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
+            Ext.EventManager.onWindowResize(this.onWindowResize, this);
+        }
+        this.doConstrain();
+        this.doLayout();
+        if(this.keyMap){
+            this.keyMap.enable();
+        }
+        this.toFront();
+        this.updateHandles();
+        if(isAnim && (Ext.isIE || Ext.isWebKit)){
+            var sz = this.getSize();
+            this.onResize(sz.width, sz.height);
+        }
+        this.fireEvent('show', this);
+    },
+
+    // private
+    animShow : function(){
+        this.proxy.show();
+        this.proxy.setBox(this.animateTarget.getBox());
+        this.proxy.setOpacity(0);
+        var b = this.getBox(false);
+        b.callback = this.afterShow.createDelegate(this, [true], false);
+        b.scope = this;
+        b.duration = 0.25;
+        b.easing = 'easeNone';
+        b.opacity = 0.5;
+        b.block = true;
+        this.el.setStyle('display', 'none');
+        this.proxy.shift(b);
+    },
+
+    <div id="method-Ext.Window-hide"></div>/**
+     * Hides the window, setting it to invisible and applying negative offsets.
+     * @param {String/Element} animateTarget (optional) The target element or id to which the window should
+     * animate while hiding (defaults to null with no animation)
+     * @param {Function} callback (optional) A callback function to call after the window is hidden
+     * @param {Object} scope (optional) The scope in which to execute the callback
+     * @return {Ext.Window} this
+     */
+    hide : function(animateTarget, cb, scope){
+        if(this.hidden || this.fireEvent('beforehide', this) === false){
+            return this;
+        }
+        if(cb){
+            this.on('hide', cb, scope, {single:true});
+        }
+        this.hidden = true;
+        if(animateTarget !== undefined){
+            this.setAnimateTarget(animateTarget);
+        }
+        if(this.modal){
+            this.mask.hide();
+            Ext.getBody().removeClass('x-body-masked');
+        }
+        if(this.animateTarget){
+            this.animHide();
+        }else{
+            this.el.hide();
+            this.afterHide();
+        }
+        return this;
+    },
+
+    // private
+    afterHide : function(){
+        this.proxy.hide();
+        if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
+            Ext.EventManager.removeResizeListener(this.onWindowResize, this);
+        }
+        if(this.keyMap){
+            this.keyMap.disable();
+        }
+        this.fireEvent('hide', this);
+    },
+
+    // private
+    animHide : function(){
+        this.proxy.setOpacity(0.5);
+        this.proxy.show();
+        var tb = this.getBox(false);
+        this.proxy.setBox(tb);
+        this.el.hide();
+        var b = this.animateTarget.getBox();
+        b.callback = this.afterHide;
+        b.scope = this;
+        b.duration = 0.25;
+        b.easing = 'easeNone';
+        b.block = true;
+        b.opacity = 0;
+        this.proxy.shift(b);
+    },
+
+    // private
+    onWindowResize : function(){
+        if(this.maximized){
+            this.fitContainer();
+        }
+        if(this.modal){
+            this.mask.setSize('100%', '100%');
+            var force = this.mask.dom.offsetHeight;
+            this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
+        }
+        this.doConstrain();
+    },
+
+    // private
+    doConstrain : function(){
+        if(this.constrain || this.constrainHeader){
+            var offsets;
+            if(this.constrain){
+                offsets = {
+                    right:this.el.shadowOffset,
+                    left:this.el.shadowOffset,
+                    bottom:this.el.shadowOffset
+                };
+            }else {
+                var s = this.getSize();
+                offsets = {
+                    right:-(s.width - 100),
+                    bottom:-(s.height - 25)
+                };
+            }
+
+            var xy = this.el.getConstrainToXY(this.container, true, offsets);
+            if(xy){
+                this.setPosition(xy[0], xy[1]);
+            }
+        }
+    },
+
+    // private - used for dragging
+    ghost : function(cls){
+        var ghost = this.createGhost(cls);
+        var box = this.getBox(true);
+        ghost.setLeftTop(box.x, box.y);
+        ghost.setWidth(box.width);
+        this.el.hide();
+        this.activeGhost = ghost;
+        return ghost;
+    },
+
+    // private
+    unghost : function(show, matchPosition){
+        if(!this.activeGhost) {
+            return;
+        }
+        if(show !== false){
+            this.el.show();
+            this.focus();
+            if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
+                this.cascade(this.setAutoScroll);
+            }
+        }
+        if(matchPosition !== false){
+            this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true));
+        }
+        this.activeGhost.hide();
+        this.activeGhost.remove();
+        delete this.activeGhost;
+    },
+
+    <div id="method-Ext.Window-minimize"></div>/**
+     * Placeholder method for minimizing the window.  By default, this method simply fires the {@link #minimize} event
+     * since the behavior of minimizing a window is application-specific.  To implement custom minimize behavior,
+     * either the minimize event can be handled or this method can be overridden.
+     * @return {Ext.Window} this
+     */
+    minimize : function(){
+        this.fireEvent('minimize', this);
+        return this;
+    },
+
+    <div id="method-Ext.Window-close"></div>/**
+     * <p>Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s
+     * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose}
+     * event is fired before the close happens and will cancel the close action if it returns false.<p>
+     * <p><b>Note:</b> This method is not affected by the {@link #closeAction} setting which
+     * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}.
+     * To hide the Window without destroying it, call {@link #hide}.</p>
+     */
+    close : function(){
+        if(this.fireEvent('beforeclose', this) !== false){
+            this.hide(null, function(){
+                this.fireEvent('close', this);
+                this.destroy();
+            }, this);
+        }
+    },
+
+    <div id="method-Ext.Window-maximize"></div>/**
+     * Fits the window within its current container and automatically replaces
+     * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button.
+     * Also see {@link #toggleMaximize}.
+     * @return {Ext.Window} this
+     */
+    maximize : function(){
+        if(!this.maximized){
+            this.expand(false);
+            this.restoreSize = this.getSize();
+            this.restorePos = this.getPosition(true);
+            if (this.maximizable){
+                this.tools.maximize.hide();
+                this.tools.restore.show();
+            }
+            this.maximized = true;
+            this.el.disableShadow();
+
+            if(this.dd){
+                this.dd.lock();
+            }
+            if(this.collapsible){
+                this.tools.toggle.hide();
+            }
+            this.el.addClass('x-window-maximized');
+            this.container.addClass('x-window-maximized-ct');
+
+            this.setPosition(0, 0);
+            this.fitContainer();
+            this.fireEvent('maximize', this);
+        }
+        return this;
+    },
+
+    <div id="method-Ext.Window-restore"></div>/**
+     * Restores a {@link #maximizable maximized}  window back to its original
+     * size and position prior to being maximized and also replaces
+     * the 'restore' tool button with the 'maximize' tool button.
+     * Also see {@link #toggleMaximize}.
+     * @return {Ext.Window} this
+     */
+    restore : function(){
+        if(this.maximized){
+            this.el.removeClass('x-window-maximized');
+            this.tools.restore.hide();
+            this.tools.maximize.show();
+            this.setPosition(this.restorePos[0], this.restorePos[1]);
+            this.setSize(this.restoreSize.width, this.restoreSize.height);
+            delete this.restorePos;
+            delete this.restoreSize;
+            this.maximized = false;
+            this.el.enableShadow(true);
+
+            if(this.dd){
+                this.dd.unlock();
+            }
+            if(this.collapsible){
+                this.tools.toggle.show();
+            }
+            this.container.removeClass('x-window-maximized-ct');
+
+            this.doConstrain();
+            this.fireEvent('restore', this);
+        }
+        return this;
+    },
+
+    <div id="method-Ext.Window-toggleMaximize"></div>/**
+     * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
+     * state of the window.
+     * @return {Ext.Window} this
+     */
+    toggleMaximize : function(){
+        return this[this.maximized ? 'restore' : 'maximize']();
+    },
+
+    // private
+    fitContainer : function(){
+        var vs = this.container.getViewSize();
+        this.setSize(vs.width, vs.height);
+    },
+
+    // private
+    // z-index is managed by the WindowManager and may be overwritten at any time
+    setZIndex : function(index){
+        if(this.modal){
+            this.mask.setStyle('z-index', index);
+        }
+        this.el.setZIndex(++index);
+        index += 5;
+
+        if(this.resizer){
+            this.resizer.proxy.setStyle('z-index', ++index);
+        }
+
+        this.lastZIndex = index;
+    },
+
+    <div id="method-Ext.Window-alignTo"></div>/**
+     * Aligns the window to the specified element
+     * @param {Mixed} element The element to align to.
+     * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details).
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @return {Ext.Window} this
+     */
+    alignTo : function(element, position, offsets){
+        var xy = this.el.getAlignToXY(element, position, offsets);
+        this.setPagePosition(xy[0], xy[1]);
+        return this;
+    },
+
+    <div id="method-Ext.Window-anchorTo"></div>/**
+     * Anchors this window to another element and realigns it when the window is resized or scrolled.
+     * @param {Mixed} element The element to align to.
+     * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details)
+     * @param {Array} offsets (optional) Offset the positioning by [x, y]
+     * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
+     * is a number, it is used as the buffer delay (defaults to 50ms).
+     * @return {Ext.Window} this
+     */
+    anchorTo : function(el, alignment, offsets, monitorScroll){
+      if(this.doAnchor){
+          Ext.EventManager.removeResizeListener(this.doAnchor, this);
+          Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
+      }
+      this.doAnchor = function(){
+          this.alignTo(el, alignment, offsets);
+      };
+      Ext.EventManager.onWindowResize(this.doAnchor, this);
+      
+      var tm = typeof monitorScroll;
+      if(tm != 'undefined'){
+          Ext.EventManager.on(window, 'scroll', this.doAnchor, this,
+              {buffer: tm == 'number' ? monitorScroll : 50});
+      }
+      this.doAnchor();
+      return this;
+    },
+
+    <div id="method-Ext.Window-toFront"></div>/**
+     * Brings this window to the front of any other visible windows
+     * @param {Boolean} e (optional) Specify <tt>false</tt> to prevent the window from being focused.
+     * @return {Ext.Window} this
+     */
+    toFront : function(e){
+        if(this.manager.bringToFront(this)){
+            if(!e || !e.getTarget().focus){
+                this.focus();
+            }
+        }
+        return this;
+    },
+
+    <div id="method-Ext.Window-setActive"></div>/**
+     * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow.  This method also
+     * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.
+     * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false)
+     */
+    setActive : function(active){
+        if(active){
+            if(!this.maximized){
+                this.el.enableShadow(true);
+            }
+            this.fireEvent('activate', this);
+        }else{
+            this.el.disableShadow();
+            this.fireEvent('deactivate', this);
+        }
+    },
+
+    <div id="method-Ext.Window-toBack"></div>/**
+     * Sends this window to the back of (lower z-index than) any other visible windows
+     * @return {Ext.Window} this
+     */
+    toBack : function(){
+        this.manager.sendToBack(this);
+        return this;
+    },
+
+    <div id="method-Ext.Window-center"></div>/**
+     * Centers this window in the viewport
+     * @return {Ext.Window} this
+     */
+    center : function(){
+        var xy = this.el.getAlignToXY(this.container, 'c-c');
+        this.setPagePosition(xy[0], xy[1]);
+        return this;
+    }
+
+    <div id="cfg-Ext.Window-autoWidth"></div>/**
+     * @cfg {Boolean} autoWidth @hide
+     **/
+});
+Ext.reg('window', Ext.Window);
+
+// private - custom Window DD implementation
+Ext.Window.DD = function(win){
+    this.win = win;
+    Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id);
+    this.setHandleElId(win.header.id);
+    this.scroll = false;
+};
+
+Ext.extend(Ext.Window.DD, Ext.dd.DD, {
+    moveOnly:true,
+    headerOffsets:[100, 25],
+    startDrag : function(){
+        var w = this.win;
+        this.proxy = w.ghost();
+        if(w.constrain !== false){
+            var so = w.el.shadowOffset;
+            this.constrainTo(w.container, {right: so, left: so, bottom: so});
+        }else if(w.constrainHeader !== false){
+            var s = this.proxy.getSize();
+            this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])});
+        }
+    },
+    b4Drag : Ext.emptyFn,
+
+    onDrag : function(e){
+        this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY());
+    },
+
+    endDrag : function(e){
+        this.win.unghost();
+        this.win.saveState();
+    }
+});
+</pre>    \r
+</body>\r
+</html>
\ No newline at end of file