Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Window.html
index 8cb9a2e..0ac6d0a 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../prettify/prettify.js"></script>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   <style type="text/css">
     .highlight { display: block; background-color: #ddd; }
   </style>
 </head>
 <body onload="prettyPrint(); highlight();">
   <pre class="prettyprint lang-js"><span id='Ext-window-Window'>/**
-</span> * @class Ext.window.Window
- * @extends Ext.panel.Panel
- * &lt;p&gt;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.&lt;/p&gt;
- * &lt;p&gt;Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
- * grouping, activation, to front, to back and other application-specific behavior.&lt;/p&gt;
- * &lt;p&gt;By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element
- * specify {@link Ext.Component#renderTo renderTo}.&lt;/p&gt;
- * &lt;p&gt;&lt;b&gt;As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window
- * to size and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out
- * child Components in the required manner.&lt;/b&gt;&lt;/p&gt;
- * {@img Ext.window.Window/Ext.window.Window.png Window component}
- * Example:&lt;code&gt;&lt;pre&gt;
-Ext.create('Ext.window.Window', {
-    title: 'Hello',
   height: 200,
   width: 400,
   layout: 'fit',
-    items: {  // Let's put an empty grid in just to illustrate fit layout
-        xtype: 'grid',
       border: false,
       columns: [{header: 'World'}],                 // One header just for show. There's no data,
-        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
-    }
-}).show();
-&lt;/pre&gt;&lt;/code&gt;
+</span> * 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.
+ *
+ * Windows can also be linked to a {@link Ext.ZIndexManager} or managed by the {@link Ext.WindowManager} to provide
+ * grouping, activation, to front, to back and other application-specific behavior.
+ *
+ * By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element specify
+ * {@link Ext.Component#renderTo renderTo}.
+ *
+ * **As with all {@link Ext.container.Container Container}s, it is important to consider how you want the Window to size
+ * and arrange any child Components. Choose an appropriate {@link #layout} configuration which lays out child Components
+ * in the required manner.**
+ *
+ *     @example
+ *     Ext.create('Ext.window.Window', {
*         title: 'Hello',
*         height: 200,
*         width: 400,
+ *         layout: 'fit',
+ *         items: {  // Let's put an empty grid in just to illustrate fit layout
*             xtype: 'grid',
*             border: false,
+ *             columns: [{header: 'World'}],                 // One header just for show. There's no data,
+ *             store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
+ *         }
+ *     }).show();
  */
 Ext.define('Ext.window.Window', {
     extend: 'Ext.panel.Panel',
@@ -55,112 +55,119 @@ Ext.define('Ext.window.Window', {
 
 <span id='Ext-window-Window-cfg-x'>    /**
 </span>     * @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.core.Element Element) (The Element that the Window is rendered to).
+     * 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).
      */
+
 <span id='Ext-window-Window-cfg-y'>    /**
 </span>     * @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.core.Element Element) (The Element that the Window is rendered to).
+     * 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).
      */
+
 <span id='Ext-window-Window-cfg-modal'>    /**
-</span>     * @cfg {Boolean} modal
+</span>     * @cfg {Boolean} [modal=false]
      * 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).
+     * restricting access to other UI elements.
      */
+
 <span id='Ext-window-Window-cfg-animateTarget'>    /**
-</span>     * @cfg {String/Element} animateTarget
-     * Id or element from which the window should animate while opening (defaults to null with no animation).
+</span>     * @cfg {String/Ext.Element} [animateTarget=null]
+     * Id or element from which the window should animate while opening.
      */
+
 <span id='Ext-window-Window-cfg-defaultFocus'>    /**
-</span>     * @cfg {String/Number/Component} defaultFocus
-     * &lt;p&gt;Specifies a Component to receive focus when this Window is focused.&lt;/p&gt;
-     * &lt;p&gt;This may be one of:&lt;/p&gt;&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
-     * &lt;li&gt;The index of a footer Button.&lt;/li&gt;
-     * &lt;li&gt;The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.&lt;/li&gt;
-     * &lt;li&gt;A Component.&lt;/li&gt;
-     * &lt;/ul&gt;&lt;/div&gt;
+</span>     * @cfg {String/Number/Ext.Component} defaultFocus
+     * Specifies a Component to receive focus when this Window is focused.
+     *
+     * This may be one of:
+     *
+     *   - The index of a footer Button.
+     *   - The id or {@link Ext.AbstractComponent#itemId} of a descendant Component.
+     *   - A Component.
      */
+
 <span id='Ext-window-Window-cfg-onEsc'>    /**
 </span>     * @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 Ext.emptyFn}).
+     * 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 {@link Ext#emptyFn Ext.emptyFn}.
      */
+
 <span id='Ext-window-Window-cfg-collapsed'>    /**
-</span>     * @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 &lt;code&gt;collapsed&lt;/code&gt; config and the window
-     * will always be expanded when shown.
+</span>     * @cfg {Boolean} [collapsed=false]
+     * True to render the window collapsed, false to render it expanded. Note that if {@link #expandOnShow}
+     * is true (the default) it will override the `collapsed` config and the window will always be
+     * expanded when shown.
      */
+
 <span id='Ext-window-Window-cfg-maximized'>    /**
-</span>     * @cfg {Boolean} maximized
-     * True to initially display the window in a maximized state. (Defaults to false).
+</span>     * @cfg {Boolean} [maximized=false]
+     * True to initially display the window in a maximized state.
      */
 
 <span id='Ext-window-Window-cfg-baseCls'>    /**
-</span>    * @cfg {String} baseCls
-    * The base CSS class to apply to this panel's element (defaults to 'x-window').
+</span>    * @cfg {String} [baseCls='x-window']
+    * The base CSS class to apply to this panel's element.
     */
     baseCls: Ext.baseCSSPrefix + 'window',
 
 <span id='Ext-window-Window-cfg-resizable'>    /**
-</span>     * @cfg {Mixed} resizable
-     * &lt;p&gt;Specify as &lt;code&gt;true&lt;/code&gt; to allow user resizing at each edge and corner of the window, false to disable
-     * resizing (defaults to true).&lt;/p&gt;
-     * &lt;p&gt;This may also be specified as a config object to &lt;/p&gt;
+</span>     * @cfg {Boolean/Object} resizable
+     * Specify as `true` to allow user resizing at each edge and corner of the window, false to disable resizing.
+     *
+     * This may also be specified as a config object to Ext.resizer.Resizer
      */
     resizable: true,
 
 <span id='Ext-window-Window-cfg-draggable'>    /**
 </span>     * @cfg {Boolean} draggable
-     * &lt;p&gt;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);).&lt;p&gt;
+     * True to allow the window to be dragged by the header bar, false to disable dragging. 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,
 
 <span id='Ext-window-Window-cfg-constrain'>    /**
 </span>     * @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}.
+     * 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}. Optionally the header only can be constrained
+     * using {@link #constrainHeader}.
      */
     constrain: false,
 
 <span id='Ext-window-Window-cfg-constrainHeader'>    /**
 </span>     * @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}.
+     * 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.
+     * Optionally the entire window can be constrained using {@link #constrain}.
      */
     constrainHeader: false,
 
 <span id='Ext-window-Window-cfg-plain'>    /**
 </span>     * @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).
+     * 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.
      */
     plain: false,
 
 <span id='Ext-window-Window-cfg-minimizable'>    /**
 </span>     * @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.
+     * and disallow minimizing the window. 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,
 
 <span id='Ext-window-Window-cfg-maximizable'>    /**
 </span>     * @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.
+     * and disallow maximizing the window. 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,
 
@@ -173,7 +180,7 @@ Ext.define('Ext.window.Window', {
 <span id='Ext-window-Window-cfg-expandOnShow'>    /**
 </span>     * @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).
+     * {@link #collapsed}) when displayed.
      */
     expandOnShow: true,
 
@@ -182,21 +189,20 @@ Ext.define('Ext.window.Window', {
 
 <span id='Ext-window-Window-cfg-closable'>    /**
 </span>     * @cfg {Boolean} closable
-     * &lt;p&gt;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 &lt;code&gt;true&lt;/code&gt;).&lt;/p&gt;
-     * &lt;p&gt;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 &lt;i&gt;{@link Ext.Component#destroy destroy}&lt;/i&gt; the Window and its content meaning that
-     * it may not be reused.&lt;/p&gt;
-     * &lt;p&gt;To make closing a Window &lt;i&gt;hide&lt;/i&gt; the Window so that it may be reused, set
-     * {@link #closeAction} to 'hide'.&lt;/p&gt;
+     * 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.
+     *
+     * 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 _{@link Ext.Component#destroy destroy}_ the
+     * Window and its content meaning that it may not be reused.
+     *
+     * To make closing a Window _hide_ the Window so that it may be reused, set {@link #closeAction} to 'hide'.
      */
     closable: true,
 
 <span id='Ext-window-Window-cfg-hidden'>    /**
 </span>     * @cfg {Boolean} hidden
-     * Render this Window hidden (default is &lt;code&gt;true&lt;/code&gt;). If &lt;code&gt;true&lt;/code&gt;, the
-     * {@link #hide} method will be called internally.
+     * Render this Window hidden. If `true`, the {@link #hide} method will be called internally.
      */
     hidden: true,
 
@@ -210,11 +216,11 @@ Ext.define('Ext.window.Window', {
 </span>    floating: true,
 
     ariaRole: 'alertdialog',
-    
+
     itemCls: 'x-window-item',
 
     overlapHeader: true,
-    
+
     ignoreHeaderBorderManagement: true,
 
     // private
@@ -227,11 +233,13 @@ Ext.define('Ext.window.Window', {
              * Fires after the window has been visually activated via {@link #setActive}.
              * @param {Ext.window.Window} this
              */
+
 <span id='Ext-window-Window-event-deactivate'>            /**
 </span>             * @event deactivate
              * Fires after the window has been visually deactivated via {@link #setActive}.
              * @param {Ext.window.Window} this
              */
+
 <span id='Ext-window-Window-event-resize'>            /**
 </span>             * @event resize
              * Fires after the window has been resized.
@@ -240,18 +248,21 @@ Ext.define('Ext.window.Window', {
              * @param {Number} height The window's new height
              */
             'resize',
+
 <span id='Ext-window-Window-event-maximize'>            /**
 </span>             * @event maximize
              * Fires after the window has been maximized.
              * @param {Ext.window.Window} this
              */
             'maximize',
+
 <span id='Ext-window-Window-event-minimize'>            /**
 </span>             * @event minimize
              * Fires after the window has been minimized.
              * @param {Ext.window.Window} this
              */
             'minimize',
+
 <span id='Ext-window-Window-event-restore'>            /**
 </span>             * @event restore
              * Fires after the window has been restored to its original size after being maximized.
@@ -317,9 +328,14 @@ Ext.define('Ext.window.Window', {
     },
 
     // private
-    onMouseDown: function () {
+    onMouseDown: function (e) {
+        var preventFocus;
+            
         if (this.floating) {
-            this.toFront();
+            if (Ext.fly(e.getTarget()).focusable()) {
+                preventFocus = true;
+            }
+            this.toFront(preventFocus);
         }
     },
 
@@ -357,6 +373,11 @@ Ext.define('Ext.window.Window', {
 
         // clickToRaise
         me.mon(me.el, 'mousedown', me.onMouseDown, me);
+        
+        // allow the element to be focusable
+        me.el.set({
+            tabIndex: -1
+        });
 
         // Initialize
         if (me.maximized) {
@@ -392,7 +413,7 @@ Ext.define('Ext.window.Window', {
         if (!me.header) {
             me.updateHeader(true);
         }
-        
+
         /*
          * Check the header here again. If for whatever reason it wasn't created in
          * updateHeader (preventHeader) then we'll just ignore the rest since the
@@ -412,16 +433,14 @@ Ext.define('Ext.window.Window', {
             }
 
 <span id='Ext-window-Window-property-dd'>            /**
-</span>             * &lt;p&gt;If this Window is configured {@link #draggable}, this property will contain
-             * an instance of {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker})
-             * which handles dragging the Window's DOM Element, and constraining according to the {@link #constrain}
-             * and {@link #constrainHeader} .&lt;/p&gt;
-             * &lt;p&gt;This has implementations of &lt;code&gt;onBeforeStart&lt;/code&gt;, &lt;code&gt;onDrag&lt;/code&gt; and &lt;code&gt;onEnd&lt;/code&gt;
-             * which perform the dragging action. If extra logic is needed at these points, use
-             * {@link Ext.Function#createInterceptor createInterceptor} or {@link Ext.Function#createSequence createSequence} to
-             * augment the existing implementations.&lt;/p&gt;
-             * @type Ext.util.ComponentDragger
-             * @property dd
+</span>             * @property {Ext.util.ComponentDragger} dd
+             * If this Window is configured {@link #draggable}, this property will contain an instance of
+             * {@link Ext.util.ComponentDragger} (A subclass of {@link Ext.dd.DragTracker DragTracker}) which handles dragging
+             * the Window's DOM Element, and constraining according to the {@link #constrain} and {@link #constrainHeader} .
+             *
+             * This has implementations of `onBeforeStart`, `onDrag` and `onEnd` which perform the dragging action. If
+             * extra logic is needed at these points, use {@link Ext.Function#createInterceptor createInterceptor} or
+             * {@link Ext.Function#createSequence createSequence} to augment the existing implementations.
              */
             me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
             me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
@@ -479,7 +498,7 @@ Ext.define('Ext.window.Window', {
     },
 
 <span id='Ext-window-Window-method-getFocusEl'>    /**
-</span>     * Gets the configured default focus item.  If a {@link #defaultFocus} is set, it will receive focus, otherwise the
+</span>     * Gets the configured default focus item. If a {@link #defaultFocus} is set, it will receive focus, otherwise the
      * Container itself will receive focus.
      */
     getFocusEl: function() {
@@ -516,17 +535,12 @@ Ext.define('Ext.window.Window', {
         var me = this,
             animating = animateTarget || me.animateTarget;
 
-        
-        if (animating) {
-            /*
-             * If we're animating, constrain the positioning before calling the
-             * superclass, otherwise we'll be animating to the unconstrained
-             * window position.
-             */
-            me.doConstrain();
-        }
+
+        // No constraining code needs to go here.
+        // Component.onShow constrains the Component. *If the constrain config is true*
+
         // Perform superclass's afterShow tasks
-        // Which might include animating a proxy from an animTarget
+        // Which might include animating a proxy from an animateTarget
         me.callParent(arguments);
 
         if (me.maximized) {
@@ -547,13 +561,15 @@ Ext.define('Ext.window.Window', {
     doClose: function() {
         var me = this;
 
-        // immediate close
+        // Being called as callback after going through the hide call below
         if (me.hidden) {
             me.fireEvent('close', me);
-            me[me.closeAction]();
+            if (me.closeAction == 'destroy') {
+                this.destroy();
+            }
         } else {
             // close after hiding
-            me.hide(me.animTarget, me.doClose, me);
+            me.hide(me.animateTarget, me.doClose, me);
         }
     },
 
@@ -582,9 +598,9 @@ Ext.define('Ext.window.Window', {
     },
 
 <span id='Ext-window-Window-method-minimize'>    /**
-</span>     * 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.
+</span>     * 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.Window} this
      */
     minimize: function() {
@@ -620,9 +636,8 @@ Ext.define('Ext.window.Window', {
     },
 
 <span id='Ext-window-Window-method-maximize'>    /**
-</span>     * 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}.
+</span>     * 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.Window} this
      */
     maximize: function() {
@@ -659,10 +674,8 @@ Ext.define('Ext.window.Window', {
     },
 
 <span id='Ext-window-Window-method-restore'>    /**
-</span>     * 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}.
+</span>     * 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.Window} this
      */
     restore: function() {
@@ -751,6 +764,7 @@ Ext.define('Ext.window.Window', {
      * Absolute positioned element and therefore cannot support autoWidth.
      * A width is a required configuration.
      **/
-});</pre>
+});
+</pre>
 </body>
 </html>