Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / MessageBox.html
index 9064112..0d06229 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-MessageBox'>/**
-</span> * @class Ext.window.MessageBox
- * @extends Ext.window.Window
-
-Utility class for generating different styles of message boxes.  The singleton instance, `Ext.Msg` can also be used.
-Note that a MessageBox is asynchronous.  Unlike a regular JavaScript `alert` (which will halt
-browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
-that should only run *after* some user feedback from the MessageBox, you must use a callback function
-(see the `function` parameter for {@link #show} for more details).
-
-{@img Ext.window.MessageBox/messagebox1.png alert MessageBox}
-{@img Ext.window.MessageBox/messagebox2.png prompt MessageBox}
-{@img Ext.window.MessageBox/messagebox3.png show MessageBox}
-#Example usage:#
-
-    // Basic alert:
-    Ext.Msg.alert('Status', 'Changes saved successfully.');
-
-    // Prompt for user data and process the result using a callback:
-    Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
-        if (btn == 'ok'){
-            // process text value and close...
-        }
-    });
-
-    // Show a dialog using config options:
-    Ext.Msg.show({
-         title:'Save Changes?',
-         msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
-         buttons: Ext.Msg.YESNOCANCEL,
-         fn: processResult,
-         animateTarget: 'elId',
-         icon: Ext.window.MessageBox.QUESTION
-    });
-
- * @markdown
- * @singleton
+</span> * Utility class for generating different styles of message boxes.  The singleton instance, Ext.MessageBox
+ * alias `Ext.Msg` can also be used.
+ *
+ * Note that a MessageBox is asynchronous.  Unlike a regular JavaScript `alert` (which will halt
+ * browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
+ * that should only run *after* some user feedback from the MessageBox, you must use a callback function
+ * (see the `function` parameter for {@link #show} for more details).
+ *
+ * Basic alert
+ *
+ *     @example
+ *     Ext.Msg.alert('Status', 'Changes saved successfully.');
+ *
+ * Prompt for user data and process the result using a callback
+ *
+ *     @example
+ *     Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ *         if (btn == 'ok'){
+ *             // process text value and close...
+ *         }
+ *     });
+ *
+ * Show a dialog using config options
+ *
+ *     @example
+ *     Ext.Msg.show({
+ *          title:'Save Changes?',
+ *          msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
+ *          buttons: Ext.Msg.YESNOCANCEL,
+ *          icon: Ext.Msg.QUESTION
+ *     });
  */
 Ext.define('Ext.window.MessageBox', {
     extend: 'Ext.window.Window',
@@ -66,8 +61,6 @@ Ext.define('Ext.window.MessageBox', {
         'Ext.ProgressBar'
     ],
 
-    alternateClassName: 'Ext.MessageBox',
-
     alias: 'widget.messagebox',
 
 <span id='Ext-window-MessageBox-property-OK'>    /**
@@ -147,19 +140,19 @@ Ext.define('Ext.window.MessageBox', {
     },
 
 <span id='Ext-window-MessageBox-property-defaultTextHeight'>    /**
-</span>     * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+</span>     * The default height in pixels of the message box's multiline textarea if displayed.
      * @type Number
      */
     defaultTextHeight : 75,
 <span id='Ext-window-MessageBox-property-minProgressWidth'>    /**
 </span>     * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
-     * for setting a different minimum width than text-only dialogs may need (defaults to 250).
+     * for setting a different minimum width than text-only dialogs may need.
      * @type Number
      */
     minProgressWidth : 250,
 <span id='Ext-window-MessageBox-property-minPromptWidth'>    /**
 </span>     * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
-     * for setting a different minimum width than text-only dialogs may need (defaults to 250).
+     * for setting a different minimum width than text-only dialogs may need.
      * @type Number
      */
     minPromptWidth: 250,
@@ -358,18 +351,13 @@ Ext.define('Ext.window.MessageBox', {
             me.width = initialWidth;
             me.render(Ext.getBody());
         } else {
-            me.hidden = false;
             me.setSize(initialWidth, me.maxHeight);
         }
         me.setPosition(-10000, -10000);
 
         // Hide or show the close tool
         me.closable = cfg.closable &amp;&amp; !cfg.wait;
-        if (cfg.closable === false) {
-            me.tools.close.hide();
-        } else {
-            me.tools.close.show();
-        }
+        me.header.child('[type=close]').setVisible(cfg.closable !== false);
 
         // Hide or show the header
         if (!cfg.title &amp;&amp; !me.closable) {
@@ -447,7 +435,6 @@ Ext.define('Ext.window.MessageBox', {
         } else {
             me.bottomTb.show();
         }
-        me.hidden = true;
     },
 
 <span id='Ext-window-MessageBox-method-show'>    /**
@@ -505,7 +492,7 @@ Ext.define('Ext.window.MessageBox', {
      * &lt;li&gt;&lt;b&gt;title&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The title text&lt;/div&gt;&lt;/li&gt;
      * &lt;li&gt;&lt;b&gt;value&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The string value to set into the active textbox element if displayed&lt;/div&gt;&lt;/li&gt;
      * &lt;li&gt;&lt;b&gt;wait&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to display a progress bar (defaults to false)&lt;/div&gt;&lt;/li&gt;
-     * &lt;li&gt;&lt;b&gt;waitConfig&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;waitConfig&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)&lt;/div&gt;&lt;/li&gt;
      * &lt;li&gt;&lt;b&gt;width&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The width of the dialog in pixels&lt;/div&gt;&lt;/li&gt;
      * &lt;/ul&gt;
      * Example usage:
@@ -514,7 +501,7 @@ Ext.Msg.show({
 title: 'Address',
 msg: 'Please enter your address:',
 width: 300,
-buttons: Ext.window.MessageBox.OKCANCEL,
+buttons: Ext.Msg.OKCANCEL,
 multiline: true,
 fn: saveAddress,
 animateTarget: 'addAddressBtn',
@@ -529,7 +516,7 @@ icon: Ext.window.MessageBox.INFO
         me.reconfigure(cfg);
         me.addCls(cfg.cls);
         if (cfg.animateTarget) {
-            me.doAutoSize(false);
+            me.doAutoSize(true);
             me.callParent();
         } else {
             me.callParent();
@@ -622,9 +609,9 @@ Ext.window.MessageBox.ERROR
 </span>     * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
      * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},
      * or by calling {@link Ext.window.MessageBox#show} with progress: true.
-     * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
-     * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
-     * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
+     * @param {Number} [value=0] Any number between 0 and 1 (e.g., .5)
+     * @param {String} [progressText=''] The progress text to display inside the progress bar.
+     * @param {String} [msg] The message box's body text is replaced with the specified string (defaults to undefined
      * so that any existing body text will not get overwritten by default unless a new value is passed in)
      * @return {Ext.window.MessageBox} this
      */
@@ -674,11 +661,11 @@ Ext.window.MessageBox.ERROR
      * close button) and the text that was entered will be passed as the two parameters to the callback.
      * @param {String} title The title bar text
      * @param {String} msg The message box body text
-     * @param {Function} fn (optional) The callback function invoked after the message box is closed
-     * @param {Object} scope (optional) The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback is executed. Defaults to the browser wnidow.
-     * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
-     * property, or the height in pixels to create the textbox (defaults to false / single-line)
-     * @param {String} value (optional) Default value of the text input element (defaults to '')
+     * @param {Function} [fn] The callback function invoked after the message box is closed
+     * @param {Object} [scope] The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the callback is executed. Defaults to the browser wnidow.
+     * @param {Boolean/Number} [multiline=false] True to create a multiline textbox using the defaultTextHeight
+     * property, or the height in pixels to create the textbox/
+     * @param {String} [value=''] Default value of the text input element
      * @return {Ext.window.MessageBox} this
      */
     prompt : function(cfg, msg, fn, scope, multiline, value){
@@ -704,7 +691,7 @@ Ext.window.MessageBox.ERROR
      * You are responsible for closing the message box when the process is complete.
      * @param {String} msg The message box body text
      * @param {String} title (optional) The title bar text
-     * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
+     * @param {Object} config (optional) A {@link Ext.ProgressBar#wait} config object
      * @return {Ext.window.MessageBox} this
      */
     wait : function(cfg, title, config){
@@ -753,7 +740,7 @@ Ext.window.MessageBox.ERROR
      * and closing the message box when the process is complete.
      * @param {String} title The title bar text
      * @param {String} msg The message box body text
-     * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
+     * @param {String} [progressText=''] The text to display inside the progress bar
      * @return {Ext.window.MessageBox} this
      */
     progress : function(cfg, msg, progressText){
@@ -761,12 +748,20 @@ Ext.window.MessageBox.ERROR
             cfg = {
                 title: cfg,
                 msg: msg,
+                progress: true,
                 progressText: progressText
             };
         }
         return this.show(cfg);
     }
 }, function() {
+<span id='Ext-MessageBox'>    /**
+</span>     * @class Ext.MessageBox
+     * @alternateClassName Ext.Msg
+     * @extends Ext.window.MessageBox
+     * @singleton
+     * Singleton instance of {@link Ext.window.MessageBox}.
+     */
     Ext.MessageBox = Ext.Msg = new this();
 });</pre>
 </body>