Window.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:34k
源码类别:

JavaScript

开发平台:

JavaScript

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