Window.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:33k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. /**
  8.  * @class Ext.Window
  9.  * @extends Ext.Panel
  10.  * <p>A specialized panel intended for use as an application window.  Windows are floated, {@link #resizable}, and
  11.  * {@link #draggable} by default.  Windows can be {@link #maximizable maximized} to fill the viewport,
  12.  * restored to their prior size, and can be {@link #minimize}d.</p>
  13.  * <p>Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide 
  14.  * grouping, activation, to front, to back and other application-specific behavior.</p>
  15.  * <p>By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
  16.  * specify {@link Ext.Component#renderTo renderTo}.</p>
  17.  * <p><b>Note:</b> By default, the <code>{@link #closable close}</code> header tool <i>destroys</i> the Window resulting in
  18.  * destruction of any child Components. This makes the Window object, and all its descendants <b>unusable</b>. To enable
  19.  * re-use of a Window, use <b><code>{@link #closeAction closeAction: 'hide'}</code></b>.</p>
  20.  * @constructor
  21.  * @param {Object} config The config object
  22.  * @xtype window
  23.  */
  24. Ext.Window = Ext.extend(Ext.Panel, {
  25.     /**
  26.      * @cfg {Number} x
  27.      * The X position of the left edge of the window on initial showing. Defaults to centering the Window within
  28.      * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
  29.      */
  30.     /**
  31.      * @cfg {Number} y
  32.      * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within
  33.      * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to).
  34.      */
  35.     /**
  36.      * @cfg {Boolean} modal
  37.      * True to make the window modal and mask everything behind it when displayed, false to display it without
  38.      * restricting access to other UI elements (defaults to false).
  39.      */
  40.     /**
  41.      * @cfg {String/Element} animateTarget
  42.      * Id or element from which the window should animate while opening (defaults to null with no animation).
  43.      */
  44.     /**
  45.      * @cfg {String} resizeHandles
  46.      * A valid {@link Ext.Resizable} handles config string (defaults to 'all').  Only applies when resizable = true.
  47.      */
  48.     /**
  49.      * @cfg {Ext.WindowGroup} manager
  50.      * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}).
  51.      */
  52.     /**
  53.     * @cfg {String/Number/Button} defaultButton
  54.     * The id / index of a button or a button instance to focus when this window received the focus.
  55.     */
  56.     /**
  57.     * @cfg {Function} onEsc
  58.     * Allows override of the built-in processing for the escape key. Default action
  59.     * is to close the Window (performing whatever action is specified in {@link #closeAction}.
  60.     * To prevent the Window closing when the escape key is pressed, specify this as
  61.     * Ext.emptyFn (See {@link Ext#emptyFn}).
  62.     */
  63.     /**
  64.      * @cfg {Boolean} collapsed
  65.      * True to render the window collapsed, false to render it expanded (defaults to false). Note that if 
  66.      * {@link #expandOnShow} is true (the default) it will override the <tt>collapsed</tt> config and the window 
  67.      * will always be expanded when shown.
  68.      */
  69.     /**
  70.      * @cfg {Boolean} maximized
  71.      * True to initially display the window in a maximized state. (Defaults to false).
  72.      */
  73.     
  74.     /**
  75.     * @cfg {String} baseCls
  76.     * The base CSS class to apply to this panel's element (defaults to 'x-window').
  77.     */
  78.     baseCls : 'x-window',
  79.     /**
  80.      * @cfg {Boolean} resizable
  81.      * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true).
  82.      */
  83.     resizable : true,
  84.     /**
  85.      * @cfg {Boolean} draggable
  86.      * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true).  Note
  87.      * that by default the window will be centered in the viewport, so if dragging is disabled the window may need
  88.      * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);).
  89.      */
  90.     draggable : true,
  91.     /**
  92.      * @cfg {Boolean} closable
  93.      * <p>True to display the 'close' tool button and allow the user to close the window, false to
  94.      * hide the button and disallow closing the window (defaults to true).</p>
  95.      * <p>By default, when close is requested by either clicking the close button in the header
  96.      * or pressing ESC when the Window has focus, the {@link #close} method will be called. This
  97.      * will <i>{@link Ext.Component#destroy destroy}</i> the Window and its content meaning that
  98.      * it may not be reused.</p>
  99.      * <p>To make closing a Window <i>hide</i> the Window so that it may be reused, set
  100.      * {@link #closeAction} to 'hide'.
  101.      */
  102.     closable : true,
  103.     /**
  104.      * @cfg {String} closeAction
  105.      * <p>The action to take when the close header tool is clicked:
  106.      * <div class="mdetail-params"><ul>
  107.      * <li><b><code>'{@link #close}'</code></b> : <b>Default</b><div class="sub-desc">
  108.      * {@link #close remove} the window from the DOM and {@link Ext.Component#destroy destroy}
  109.      * it and all descendant Components. The window will <b>not</b> be available to be
  110.      * redisplayed via the {@link #show} method.
  111.      * </div></li>
  112.      * <li><b><code>'{@link #hide}'</code></b> : <div class="sub-desc">
  113.      * {@link #hide} the window by setting visibility to hidden and applying negative offsets.
  114.      * The window will be available to be redisplayed via the {@link #show} method.
  115.      * </div></li>
  116.      * </ul></div>
  117.      * <p><b>Note:</b> This setting does not affect the {@link #close} method
  118.      * which will always {@link Ext.Component#destroy destroy} the window. To
  119.      * programatically <i>hide</i> a window, call {@link #hide}.</p>
  120.      */
  121.     closeAction : 'close',
  122.     /**
  123.      * @cfg {Boolean} constrain
  124.      * True to constrain the window within its containing element, false to allow it to fall outside of its
  125.      * containing element. By default the window will be rendered to document.body.  To render and constrain the 
  126.      * window within another element specify {@link #renderTo}.
  127.      * (defaults to false).  Optionally the header only can be constrained using {@link #constrainHeader}.
  128.      */
  129.     constrain : false,
  130.     /**
  131.      * @cfg {Boolean} constrainHeader
  132.      * True to constrain the window header within its containing element (allowing the window body to fall outside 
  133.      * of its containing element) or false to allow the header to fall outside its containing element (defaults to 
  134.      * false). Optionally the entire window can be constrained using {@link #constrain}.
  135.      */
  136.     constrainHeader : false,
  137.     /**
  138.      * @cfg {Boolean} plain
  139.      * True to render the window body with a transparent background so that it will blend into the framing
  140.      * elements, false to add a lighter background color to visually highlight the body element and separate it
  141.      * more distinctly from the surrounding frame (defaults to false).
  142.      */
  143.     plain : false,
  144.     /**
  145.      * @cfg {Boolean} minimizable
  146.      * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button
  147.      * and disallow minimizing the window (defaults to false).  Note that this button provides no implementation --
  148.      * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a
  149.      * custom minimize behavior implemented for this option to be useful.
  150.      */
  151.     minimizable : false,
  152.     /**
  153.      * @cfg {Boolean} maximizable
  154.      * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button
  155.      * and disallow maximizing the window (defaults to false).  Note that when a window is maximized, the tool button
  156.      * will automatically change to a 'restore' button with the appropriate behavior already built-in that will
  157.      * restore the window to its previous size.
  158.      */
  159.     maximizable : false,
  160.     /**
  161.      * @cfg {Number} minHeight
  162.      * The minimum height in pixels allowed for this window (defaults to 100).  Only applies when resizable = true.
  163.      */
  164.     minHeight : 100,
  165.     /**
  166.      * @cfg {Number} minWidth
  167.      * The minimum width in pixels allowed for this window (defaults to 200).  Only applies when resizable = true.
  168.      */
  169.     minWidth : 200,
  170.     /**
  171.      * @cfg {Boolean} expandOnShow
  172.      * True to always expand the window when it is displayed, false to keep it in its current state (which may be
  173.      * {@link #collapsed}) when displayed (defaults to true).
  174.      */
  175.     expandOnShow : true,
  176.     // inherited docs, same default
  177.     collapsible : false,
  178.     /**
  179.      * @cfg {Boolean} initHidden
  180.      * True to hide the window until show() is explicitly called (defaults to true).
  181.      */
  182.     initHidden : true,
  183.     /**
  184.     * @cfg {Boolean} monitorResize @hide
  185.     * This is automatically managed based on the value of constrain and constrainToHeader
  186.     */
  187.     monitorResize : true,
  188.     // The following configs are set to provide the basic functionality of a window.
  189.     // Changing them would require additional code to handle correctly and should
  190.     // usually only be done in subclasses that can provide custom behavior.  Changing them
  191.     // may have unexpected or undesirable results.
  192.     /** @cfg {String} elements @hide */
  193.     elements : 'header,body',
  194.     /** @cfg {Boolean} frame @hide */
  195.     frame : true,
  196.     /** @cfg {Boolean} floating @hide */
  197.     floating : true,
  198.     // private
  199.     initComponent : function(){
  200.         Ext.Window.superclass.initComponent.call(this);
  201.         this.addEvents(
  202.             /**
  203.              * @event activate
  204.              * Fires after the window has been visually activated via {@link setActive}.
  205.              * @param {Ext.Window} this
  206.              */
  207.             /**
  208.              * @event deactivate
  209.              * Fires after the window has been visually deactivated via {@link setActive}.
  210.              * @param {Ext.Window} this
  211.              */
  212.             /**
  213.              * @event resize
  214.              * Fires after the window has been resized.
  215.              * @param {Ext.Window} this
  216.              * @param {Number} width The window's new width
  217.              * @param {Number} height The window's new height
  218.              */
  219.             'resize',
  220.             /**
  221.              * @event maximize
  222.              * Fires after the window has been maximized.
  223.              * @param {Ext.Window} this
  224.              */
  225.             'maximize',
  226.             /**
  227.              * @event minimize
  228.              * Fires after the window has been minimized.
  229.              * @param {Ext.Window} this
  230.              */
  231.             'minimize',
  232.             /**
  233.              * @event restore
  234.              * Fires after the window has been restored to its original size after being maximized.
  235.              * @param {Ext.Window} this
  236.              */
  237.             'restore'
  238.         );
  239.         if(this.initHidden === false){
  240.             this.show();
  241.         }else{
  242.             this.hidden = true;
  243.         }
  244.     },
  245.     // private
  246.     getState : function(){
  247.         return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true));
  248.     },
  249.     // private
  250.     onRender : function(ct, position){
  251.         Ext.Window.superclass.onRender.call(this, ct, position);
  252.         if(this.plain){
  253.             this.el.addClass('x-window-plain');
  254.         }
  255.         // this element allows the Window to be focused for keyboard events
  256.         this.focusEl = this.el.createChild({
  257.                     tag: 'a', href:'#', cls:'x-dlg-focus',
  258.                     tabIndex:'-1', html: '&#160;'});
  259.         this.focusEl.swallowEvent('click', true);
  260.         this.proxy = this.el.createProxy('x-window-proxy');
  261.         this.proxy.enableDisplayMode('block');
  262.         if(this.modal){
  263.             this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom);
  264.             this.mask.enableDisplayMode('block');
  265.             this.mask.hide();
  266.             this.mon(this.mask, 'click', this.focus, this);
  267.         }
  268.         this.initTools();
  269.     },
  270.     // private
  271.     initEvents : function(){
  272.         Ext.Window.superclass.initEvents.call(this);
  273.         if(this.animateTarget){
  274.             this.setAnimateTarget(this.animateTarget);
  275.         }
  276.         if(this.resizable){
  277.             this.resizer = new Ext.Resizable(this.el, {
  278.                 minWidth: this.minWidth,
  279.                 minHeight:this.minHeight,
  280.                 handles: this.resizeHandles || 'all',
  281.                 pinned: true,
  282.                 resizeElement : this.resizerAction
  283.             });
  284.             this.resizer.window = this;
  285.             this.mon(this.resizer, 'beforeresize', this.beforeResize, this);
  286.         }
  287.         if(this.draggable){
  288.             this.header.addClass('x-window-draggable');
  289.         }
  290.         this.mon(this.el, 'mousedown', this.toFront, this);
  291.         this.manager = this.manager || Ext.WindowMgr;
  292.         this.manager.register(this);
  293.         if(this.maximized){
  294.             this.maximized = false;
  295.             this.maximize();
  296.         }
  297.         if(this.closable){
  298.             var km = this.getKeyMap();
  299.             km.on(27, this.onEsc, this);
  300.             km.disable();
  301.         }
  302.     },
  303.     initDraggable : function(){
  304.         /**
  305.          * If this Window is configured {@link #draggable}, this property will contain
  306.          * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element.
  307.          * @type Ext.dd.DD
  308.          * @property dd
  309.          */
  310.         this.dd = new Ext.Window.DD(this);
  311.     },
  312.    // private
  313.     onEsc : function(){
  314.         this[this.closeAction]();
  315.     },
  316.     // private
  317.     beforeDestroy : function(){
  318.         if (this.rendered){
  319.             this.hide();
  320.           if(this.doAnchor){
  321.                 Ext.EventManager.removeResizeListener(this.doAnchor, this);
  322.               Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
  323.             }
  324.             Ext.destroy(
  325.                 this.focusEl,
  326.                 this.resizer,
  327.                 this.dd,
  328.                 this.proxy,
  329.                 this.mask
  330.             );
  331.         }
  332.         Ext.Window.superclass.beforeDestroy.call(this);
  333.     },
  334.     // private
  335.     onDestroy : function(){
  336.         if(this.manager){
  337.             this.manager.unregister(this);
  338.         }
  339.         Ext.Window.superclass.onDestroy.call(this);
  340.     },
  341.     // private
  342.     initTools : function(){
  343.         if(this.minimizable){
  344.             this.addTool({
  345.                 id: 'minimize',
  346.                 handler: this.minimize.createDelegate(this, [])
  347.             });
  348.         }
  349.         if(this.maximizable){
  350.             this.addTool({
  351.                 id: 'maximize',
  352.                 handler: this.maximize.createDelegate(this, [])
  353.             });
  354.             this.addTool({
  355.                 id: 'restore',
  356.                 handler: this.restore.createDelegate(this, []),
  357.                 hidden:true
  358.             });
  359.             this.mon(this.header, 'dblclick', this.toggleMaximize, this);
  360.         }
  361.         if(this.closable){
  362.             this.addTool({
  363.                 id: 'close',
  364.                 handler: this[this.closeAction].createDelegate(this, [])
  365.             });
  366.         }
  367.     },
  368.     // private
  369.     resizerAction : function(){
  370.         var box = this.proxy.getBox();
  371.         this.proxy.hide();
  372.         this.window.handleResize(box);
  373.         return box;
  374.     },
  375.     // private
  376.     beforeResize : function(){
  377.         this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size?
  378.         this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40);
  379.         this.resizeBox = this.el.getBox();
  380.     },
  381.     // private
  382.     updateHandles : function(){
  383.         if(Ext.isIE && this.resizer){
  384.             this.resizer.syncHandleHeight();
  385.             this.el.repaint();
  386.         }
  387.     },
  388.     // private
  389.     handleResize : function(box){
  390.         var rz = this.resizeBox;
  391.         if(rz.x != box.x || rz.y != box.y){
  392.             this.updateBox(box);
  393.         }else{
  394.             this.setSize(box);
  395.         }
  396.         this.focus();
  397.         this.updateHandles();
  398.         this.saveState();
  399.         this.doLayout();
  400.         this.fireEvent('resize', this, box.width, box.height);
  401.     },
  402.     /**
  403.      * Focuses the window.  If a defaultButton is set, it will receive focus, otherwise the
  404.      * window itself will receive focus.
  405.      */
  406.     focus : function(){
  407.         var f = this.focusEl, db = this.defaultButton, t = typeof db;
  408.         if(t != 'undefined'){
  409.             if(t == 'number' && this.fbar){
  410.                 f = this.fbar.items.get(db);
  411.             }else if(t == 'string'){
  412.                 f = Ext.getCmp(db);
  413.             }else{
  414.                 f = db;
  415.             }
  416.         }
  417.         f = f || this.focusEl;
  418.         f.focus.defer(10, f);
  419.     },
  420.     /**
  421.      * Sets the target element from which the window should animate while opening.
  422.      * @param {String/Element} el The target element or id
  423.      */
  424.     setAnimateTarget : function(el){
  425.         el = Ext.get(el);
  426.         this.animateTarget = el;
  427.     },
  428.     // private
  429.     beforeShow : function(){
  430.         delete this.el.lastXY;
  431.         delete this.el.lastLT;
  432.         if(this.x === undefined || this.y === undefined){
  433.             var xy = this.el.getAlignToXY(this.container, 'c-c');
  434.             var pos = this.el.translatePoints(xy[0], xy[1]);
  435.             this.x = this.x === undefined? pos.left : this.x;
  436.             this.y = this.y === undefined? pos.top : this.y;
  437.         }
  438.         this.el.setLeftTop(this.x, this.y);
  439.         if(this.expandOnShow){
  440.             this.expand(false);
  441.         }
  442.         if(this.modal){
  443.             Ext.getBody().addClass('x-body-masked');
  444.             this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
  445.             this.mask.show();
  446.         }
  447.     },
  448.     /**
  449.      * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
  450.      * @param {String/Element} animateTarget (optional) The target element or id from which the window should
  451.      * animate while opening (defaults to null with no animation)
  452.      * @param {Function} callback (optional) A callback function to call after the window is displayed
  453.      * @param {Object} scope (optional) The scope in which to execute the callback
  454.      * @return {Ext.Window} this
  455.      */
  456.     show : function(animateTarget, cb, scope){
  457.         if(!this.rendered){
  458.             this.render(Ext.getBody());
  459.         }
  460.         if(this.hidden === false){
  461.             this.toFront();
  462.             return this;
  463.         }
  464.         if(this.fireEvent('beforeshow', this) === false){
  465.             return this;
  466.         }
  467.         if(cb){
  468.             this.on('show', cb, scope, {single:true});
  469.         }
  470.         this.hidden = false;
  471.         if(animateTarget !== undefined){
  472.             this.setAnimateTarget(animateTarget);
  473.         }
  474.         this.beforeShow();
  475.         if(this.animateTarget){
  476.             this.animShow();
  477.         }else{
  478.             this.afterShow();
  479.         }
  480.         return this;
  481.     },
  482.     // private
  483.     afterShow : function(isAnim){
  484.         this.proxy.hide();
  485.         this.el.setStyle('display', 'block');
  486.         this.el.show();
  487.         if(this.maximized){
  488.             this.fitContainer();
  489.         }
  490.         if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
  491.             this.cascade(this.setAutoScroll);
  492.         }
  493.         if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
  494.             Ext.EventManager.onWindowResize(this.onWindowResize, this);
  495.         }
  496.         this.doConstrain();
  497.         this.doLayout();
  498.         if(this.keyMap){
  499.             this.keyMap.enable();
  500.         }
  501.         this.toFront();
  502.         this.updateHandles();
  503.         if(isAnim && (Ext.isIE || Ext.isWebKit)){
  504.             var sz = this.getSize();
  505.             this.onResize(sz.width, sz.height);
  506.         }
  507.         this.fireEvent('show', this);
  508.     },
  509.     // private
  510.     animShow : function(){
  511.         this.proxy.show();
  512.         this.proxy.setBox(this.animateTarget.getBox());
  513.         this.proxy.setOpacity(0);
  514.         var b = this.getBox(false);
  515.         b.callback = this.afterShow.createDelegate(this, [true], false);
  516.         b.scope = this;
  517.         b.duration = 0.25;
  518.         b.easing = 'easeNone';
  519.         b.opacity = 0.5;
  520.         b.block = true;
  521.         this.el.setStyle('display', 'none');
  522.         this.proxy.shift(b);
  523.     },
  524.     /**
  525.      * Hides the window, setting it to invisible and applying negative offsets.
  526.      * @param {String/Element} animateTarget (optional) The target element or id to which the window should
  527.      * animate while hiding (defaults to null with no animation)
  528.      * @param {Function} callback (optional) A callback function to call after the window is hidden
  529.      * @param {Object} scope (optional) The scope in which to execute the callback
  530.      * @return {Ext.Window} this
  531.      */
  532.     hide : function(animateTarget, cb, scope){
  533.         if(this.hidden || this.fireEvent('beforehide', this) === false){
  534.             return this;
  535.         }
  536.         if(cb){
  537.             this.on('hide', cb, scope, {single:true});
  538.         }
  539.         this.hidden = true;
  540.         if(animateTarget !== undefined){
  541.             this.setAnimateTarget(animateTarget);
  542.         }
  543.         if(this.modal){
  544.             this.mask.hide();
  545.             Ext.getBody().removeClass('x-body-masked');
  546.         }
  547.         if(this.animateTarget){
  548.             this.animHide();
  549.         }else{
  550.             this.el.hide();
  551.             this.afterHide();
  552.         }
  553.         return this;
  554.     },
  555.     // private
  556.     afterHide : function(){
  557.         this.proxy.hide();
  558.         if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
  559.             Ext.EventManager.removeResizeListener(this.onWindowResize, this);
  560.         }
  561.         if(this.keyMap){
  562.             this.keyMap.disable();
  563.         }
  564.         this.fireEvent('hide', this);
  565.     },
  566.     // private
  567.     animHide : function(){
  568.         this.proxy.setOpacity(0.5);
  569.         this.proxy.show();
  570.         var tb = this.getBox(false);
  571.         this.proxy.setBox(tb);
  572.         this.el.hide();
  573.         var b = this.animateTarget.getBox();
  574.         b.callback = this.afterHide;
  575.         b.scope = this;
  576.         b.duration = 0.25;
  577.         b.easing = 'easeNone';
  578.         b.block = true;
  579.         b.opacity = 0;
  580.         this.proxy.shift(b);
  581.     },
  582.     // private
  583.     onWindowResize : function(){
  584.         if(this.maximized){
  585.             this.fitContainer();
  586.         }
  587.         if(this.modal){
  588.             this.mask.setSize('100%', '100%');
  589.             var force = this.mask.dom.offsetHeight;
  590.             this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
  591.         }
  592.         this.doConstrain();
  593.     },
  594.     // private
  595.     doConstrain : function(){
  596.         if(this.constrain || this.constrainHeader){
  597.             var offsets;
  598.             if(this.constrain){
  599.                 offsets = {
  600.                     right:this.el.shadowOffset,
  601.                     left:this.el.shadowOffset,
  602.                     bottom:this.el.shadowOffset
  603.                 };
  604.             }else {
  605.                 var s = this.getSize();
  606.                 offsets = {
  607.                     right:-(s.width - 100),
  608.                     bottom:-(s.height - 25)
  609.                 };
  610.             }
  611.             var xy = this.el.getConstrainToXY(this.container, true, offsets);
  612.             if(xy){
  613.                 this.setPosition(xy[0], xy[1]);
  614.             }
  615.         }
  616.     },
  617.     // private - used for dragging
  618.     ghost : function(cls){
  619.         var ghost = this.createGhost(cls);
  620.         var box = this.getBox(true);
  621.         ghost.setLeftTop(box.x, box.y);
  622.         ghost.setWidth(box.width);
  623.         this.el.hide();
  624.         this.activeGhost = ghost;
  625.         return ghost;
  626.     },
  627.     // private
  628.     unghost : function(show, matchPosition){
  629.         if(!this.activeGhost) {
  630.             return;
  631.         }
  632.         if(show !== false){
  633.             this.el.show();
  634.             this.focus();
  635.             if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
  636.                 this.cascade(this.setAutoScroll);
  637.             }
  638.         }
  639.         if(matchPosition !== false){
  640.             this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true));
  641.         }
  642.         this.activeGhost.hide();
  643.         this.activeGhost.remove();
  644.         delete this.activeGhost;
  645.     },
  646.     /**
  647.      * Placeholder method for minimizing the window.  By default, this method simply fires the {@link #minimize} event
  648.      * since the behavior of minimizing a window is application-specific.  To implement custom minimize behavior,
  649.      * either the minimize event can be handled or this method can be overridden.
  650.      * @return {Ext.Window} this
  651.      */
  652.     minimize : function(){
  653.         this.fireEvent('minimize', this);
  654.         return this;
  655.     },
  656.     /**
  657.      * <p>Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s
  658.      * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose}
  659.      * event is fired before the close happens and will cancel the close action if it returns false.<p>
  660.      * <p><b>Note:</b> This method is not affected by the {@link #closeAction} setting which
  661.      * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}.
  662.      * To hide the Window without destroying it, call {@link #hide}.</p>
  663.      */
  664.     close : function(){
  665.         if(this.fireEvent('beforeclose', this) !== false){
  666.             this.hide(null, function(){
  667.                 this.fireEvent('close', this);
  668.                 this.destroy();
  669.             }, this);
  670.         }
  671.     },
  672.     /**
  673.      * Fits the window within its current container and automatically replaces
  674.      * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button.
  675.      * Also see {@link #toggleMaximize}.
  676.      * @return {Ext.Window} this
  677.      */
  678.     maximize : function(){
  679.         if(!this.maximized){
  680.             this.expand(false);
  681.             this.restoreSize = this.getSize();
  682.             this.restorePos = this.getPosition(true);
  683.             if (this.maximizable){
  684.                 this.tools.maximize.hide();
  685.                 this.tools.restore.show();
  686.             }
  687.             this.maximized = true;
  688.             this.el.disableShadow();
  689.             if(this.dd){
  690.                 this.dd.lock();
  691.             }
  692.             if(this.collapsible){
  693.                 this.tools.toggle.hide();
  694.             }
  695.             this.el.addClass('x-window-maximized');
  696.             this.container.addClass('x-window-maximized-ct');
  697.             this.setPosition(0, 0);
  698.             this.fitContainer();
  699.             this.fireEvent('maximize', this);
  700.         }
  701.         return this;
  702.     },
  703.     /**
  704.      * Restores a {@link #maximizable maximized}  window back to its original
  705.      * size and position prior to being maximized and also replaces
  706.      * the 'restore' tool button with the 'maximize' tool button.
  707.      * Also see {@link #toggleMaximize}.
  708.      * @return {Ext.Window} this
  709.      */
  710.     restore : function(){
  711.         if(this.maximized){
  712.             this.el.removeClass('x-window-maximized');
  713.             this.tools.restore.hide();
  714.             this.tools.maximize.show();
  715.             this.setPosition(this.restorePos[0], this.restorePos[1]);
  716.             this.setSize(this.restoreSize.width, this.restoreSize.height);
  717.             delete this.restorePos;
  718.             delete this.restoreSize;
  719.             this.maximized = false;
  720.             this.el.enableShadow(true);
  721.             if(this.dd){
  722.                 this.dd.unlock();
  723.             }
  724.             if(this.collapsible){
  725.                 this.tools.toggle.show();
  726.             }
  727.             this.container.removeClass('x-window-maximized-ct');
  728.             this.doConstrain();
  729.             this.fireEvent('restore', this);
  730.         }
  731.         return this;
  732.     },
  733.     /**
  734.      * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized
  735.      * state of the window.
  736.      * @return {Ext.Window} this
  737.      */
  738.     toggleMaximize : function(){
  739.         return this[this.maximized ? 'restore' : 'maximize']();
  740.     },
  741.     // private
  742.     fitContainer : function(){
  743.         var vs = this.container.getViewSize();
  744.         this.setSize(vs.width, vs.height);
  745.     },
  746.     // private
  747.     // z-index is managed by the WindowManager and may be overwritten at any time
  748.     setZIndex : function(index){
  749.         if(this.modal){
  750.             this.mask.setStyle('z-index', index);
  751.         }
  752.         this.el.setZIndex(++index);
  753.         index += 5;
  754.         if(this.resizer){
  755.             this.resizer.proxy.setStyle('z-index', ++index);
  756.         }
  757.         this.lastZIndex = index;
  758.     },
  759.     /**
  760.      * Aligns the window to the specified element
  761.      * @param {Mixed} element The element to align to.
  762.      * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details).
  763.      * @param {Array} offsets (optional) Offset the positioning by [x, y]
  764.      * @return {Ext.Window} this
  765.      */
  766.     alignTo : function(element, position, offsets){
  767.         var xy = this.el.getAlignToXY(element, position, offsets);
  768.         this.setPagePosition(xy[0], xy[1]);
  769.         return this;
  770.     },
  771.     /**
  772.      * Anchors this window to another element and realigns it when the window is resized or scrolled.
  773.      * @param {Mixed} element The element to align to.
  774.      * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details)
  775.      * @param {Array} offsets (optional) Offset the positioning by [x, y]
  776.      * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
  777.      * is a number, it is used as the buffer delay (defaults to 50ms).
  778.      * @return {Ext.Window} this
  779.      */
  780.     anchorTo : function(el, alignment, offsets, monitorScroll){
  781.       if(this.doAnchor){
  782.           Ext.EventManager.removeResizeListener(this.doAnchor, this);
  783.           Ext.EventManager.un(window, 'scroll', this.doAnchor, this);
  784.       }
  785.       this.doAnchor = function(){
  786.           this.alignTo(el, alignment, offsets);
  787.       };
  788.       Ext.EventManager.onWindowResize(this.doAnchor, this);
  789.       
  790.       var tm = typeof monitorScroll;
  791.       if(tm != 'undefined'){
  792.           Ext.EventManager.on(window, 'scroll', this.doAnchor, this,
  793.               {buffer: tm == 'number' ? monitorScroll : 50});
  794.       }
  795.       this.doAnchor();
  796.       return this;
  797.     },
  798.     /**
  799.      * Brings this window to the front of any other visible windows
  800.      * @param {Boolean} e (optional) Specify <tt>false</tt> to prevent the window from being focused.
  801.      * @return {Ext.Window} this
  802.      */
  803.     toFront : function(e){
  804.         if(this.manager.bringToFront(this)){
  805.             if(!e || !e.getTarget().focus){
  806.                 this.focus();
  807.             }
  808.         }
  809.         return this;
  810.     },
  811.     /**
  812.      * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow.  This method also
  813.      * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred.
  814.      * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false)
  815.      */
  816.     setActive : function(active){
  817.         if(active){
  818.             if(!this.maximized){
  819.                 this.el.enableShadow(true);
  820.             }
  821.             this.fireEvent('activate', this);
  822.         }else{
  823.             this.el.disableShadow();
  824.             this.fireEvent('deactivate', this);
  825.         }
  826.     },
  827.     /**
  828.      * Sends this window to the back of (lower z-index than) any other visible windows
  829.      * @return {Ext.Window} this
  830.      */
  831.     toBack : function(){
  832.         this.manager.sendToBack(this);
  833.         return this;
  834.     },
  835.     /**
  836.      * Centers this window in the viewport
  837.      * @return {Ext.Window} this
  838.      */
  839.     center : function(){
  840.         var xy = this.el.getAlignToXY(this.container, 'c-c');
  841.         this.setPagePosition(xy[0], xy[1]);
  842.         return this;
  843.     }
  844.     /**
  845.      * @cfg {Boolean} autoWidth @hide
  846.      **/
  847. });
  848. Ext.reg('window', Ext.Window);
  849. // private - custom Window DD implementation
  850. Ext.Window.DD = function(win){
  851.     this.win = win;
  852.     Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id);
  853.     this.setHandleElId(win.header.id);
  854.     this.scroll = false;
  855. };
  856. Ext.extend(Ext.Window.DD, Ext.dd.DD, {
  857.     moveOnly:true,
  858.     headerOffsets:[100, 25],
  859.     startDrag : function(){
  860.         var w = this.win;
  861.         this.proxy = w.ghost();
  862.         if(w.constrain !== false){
  863.             var so = w.el.shadowOffset;
  864.             this.constrainTo(w.container, {right: so, left: so, bottom: so});
  865.         }else if(w.constrainHeader !== false){
  866.             var s = this.proxy.getSize();
  867.             this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])});
  868.         }
  869.     },
  870.     b4Drag : Ext.emptyFn,
  871.     onDrag : function(e){
  872.         this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY());
  873.     },
  874.     endDrag : function(e){
  875.         this.win.unghost();
  876.         this.win.saveState();
  877.     }
  878. });