X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/MessageBox.html diff --git a/docs/source/MessageBox.html b/docs/source/MessageBox.html index c899d199..0d06229a 100644 --- a/docs/source/MessageBox.html +++ b/docs/source/MessageBox.html @@ -1,41 +1,52 @@ -Sencha Documentation Project
/**
- * @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
- * @xtype messagebox
+
+
+
+  
+  The source code
+  
+  
+  
+  
+
+
+  
/**
+ * 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',
@@ -49,62 +60,60 @@ Ext.define('Ext.window.MessageBox', {
         'Ext.layout.container.HBox',
         'Ext.ProgressBar'
     ],
-    
-    alternateClassName: 'Ext.MessageBox',
 
     alias: 'widget.messagebox',
 
-    /**
+    /**
      * Button config that displays a single OK button
      * @type Number
      */
     OK : 1,
-    /**
+    /**
      * Button config that displays a single Yes button
      * @type Number
      */
     YES : 2,
-    /**
+    /**
      * Button config that displays a single No button
      * @type Number
      */
     NO : 4,
-    /**
+    /**
      * Button config that displays a single Cancel button
      * @type Number
      */
     CANCEL : 8,
-    /**
+    /**
      * Button config that displays OK and Cancel buttons
      * @type Number
      */
     OKCANCEL : 9,
-    /**
+    /**
      * Button config that displays Yes and No buttons
      * @type Number
      */
     YESNO : 6,
-    /**
+    /**
      * Button config that displays Yes, No and Cancel buttons
      * @type Number
      */
     YESNOCANCEL : 14,
-    /**
+    /**
      * The CSS class that provides the INFO icon image
      * @type String
      */
     INFO : 'ext-mb-info',
-    /**
+    /**
      * The CSS class that provides the WARNING icon image
      * @type String
      */
     WARNING : 'ext-mb-warning',
-    /**
+    /**
      * The CSS class that provides the QUESTION icon image
      * @type String
      */
     QUESTION : 'ext-mb-question',
-    /**
+    /**
      * The CSS class that provides the ERROR icon image
      * @type String
      */
@@ -130,24 +139,24 @@ Ext.define('Ext.window.MessageBox', {
         type: 'anchor'
     },
 
-    /**
-     * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+    /**
+     * The default height in pixels of the message box's multiline textarea if displayed.
      * @type Number
      */
     defaultTextHeight : 75,
-    /**
+    /**
      * 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,
-    /**
+    /**
      * 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,
-    /**
+    /**
      * An object containing the default button text strings that can be overriden for localized language support.
      * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
      * resource file for handling language support across the framework.
@@ -171,7 +180,7 @@ Ext.define('Ext.window.MessageBox', {
         wait: 'Loading...',
         alert: 'Attention'
     },
-    
+
     iconHeight: 35,
 
     makeButton: function(btnIdx) {
@@ -295,7 +304,7 @@ Ext.define('Ext.window.MessageBox', {
     onPromptKey: function(textField, e) {
         var me = this,
             blur;
-            
+
         if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) {
             if (me.msgButtons.ok.isVisible()) {
                 blur = true;
@@ -304,7 +313,7 @@ Ext.define('Ext.window.MessageBox', {
                 me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
                 blur = true;
             }
-            
+
             if (blur) {
                 me.textField.blur();
             }
@@ -326,7 +335,7 @@ Ext.define('Ext.window.MessageBox', {
 
         // Default to allowing the Window to take focus.
         delete me.defaultFocus;
-        
+
         // clear any old animateTarget
         me.animateTarget = cfg.animateTarget || undefined;
 
@@ -348,11 +357,7 @@ Ext.define('Ext.window.MessageBox', {
 
         // Hide or show the close tool
         me.closable = cfg.closable && !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 && !me.closable) {
@@ -430,10 +435,9 @@ Ext.define('Ext.window.MessageBox', {
         } else {
             me.bottomTb.show();
         }
-        me.hidden = true;
     },
 
-    /**
+    /**
      * Displays a new message box, or reinitializes an existing message box, based on the config options
      * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
      * although those calls are basic shortcuts and do not support all of the config options allowed here.
@@ -488,7 +492,7 @@ Ext.define('Ext.window.MessageBox', {
      * <li><b>title</b> : String<div class="sub-desc">The title text</div></li>
      * <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li>
      * <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
-     * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li>
+     * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)</div></li>
      * <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li>
      * </ul>
      * Example usage:
@@ -497,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',
@@ -508,11 +512,11 @@ icon: Ext.window.MessageBox.INFO
      */
     show: function(cfg) {
         var me = this;
-            
+
         me.reconfigure(cfg);
         me.addCls(cfg.cls);
         if (cfg.animateTarget) {
-            me.doAutoSize(false);
+            me.doAutoSize(true);
             me.callParent();
         } else {
             me.callParent();
@@ -520,11 +524,11 @@ icon: Ext.window.MessageBox.INFO
         }
         return me;
     },
-    
+
     afterShow: function(){
         if (this.animateTarget) {
             this.center();
-        }    
+        }
         this.callParent(arguments);
     },
 
@@ -536,7 +540,7 @@ icon: Ext.window.MessageBox.INFO
         if (!Ext.isDefined(me.frameWidth)) {
             me.frameWidth = me.el.getWidth() - me.body.getWidth();
         }
-        
+
         // reset to the original dimensions
         icon.setHeight(iconHeight);
 
@@ -573,7 +577,7 @@ icon: Ext.window.MessageBox.INFO
         return this.doAutoSize(true);
     },
 
-    /**
+    /**
      * Adds the specified icon to the dialog.  By default, the class 'ext-mb-icon' is applied for default
      * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
      * to clear any existing icon. This method must be called before the MessageBox is shown.
@@ -601,13 +605,13 @@ Ext.window.MessageBox.ERROR
         return me;
     },
 
-    /**
+    /**
      * 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
      */
@@ -625,7 +629,7 @@ Ext.window.MessageBox.ERROR
         }
     },
 
-    /**
+    /**
      * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
      * If a callback function is passed it will be called after the user clicks either button,
      * and the id of the button that was clicked will be passed as the only parameter to the callback
@@ -650,18 +654,18 @@ Ext.window.MessageBox.ERROR
         return this.show(cfg);
     },
 
-    /**
+    /**
      * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
      * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user
      * clicks either button, and the id of the button that was clicked (could also be the top-right
      * 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 (<code>this</code> 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 (<code>this</code> 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){
@@ -681,13 +685,13 @@ Ext.window.MessageBox.ERROR
         return this.show(cfg);
     },
 
-    /**
+    /**
      * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
      * interaction while waiting for a long-running process to complete that does not have defined intervals.
      * 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){
@@ -705,7 +709,7 @@ Ext.window.MessageBox.ERROR
         return this.show(cfg);
     },
 
-    /**
+    /**
      * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
      * If a callback function is passed it will be called after the user clicks the button, and the
      * id of the button that was clicked will be passed as the only parameter to the callback
@@ -730,13 +734,13 @@ Ext.window.MessageBox.ERROR
         return this.show(cfg);
     },
 
-    /**
+    /**
      * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
      * the user.  You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}
      * 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){
@@ -744,11 +748,21 @@ Ext.window.MessageBox.ERROR
             cfg = {
                 title: cfg,
                 msg: msg,
+                progress: true,
                 progressText: progressText
             };
         }
         return this.show(cfg);
     }
 }, function() {
+    /**
+     * @class Ext.MessageBox
+     * @alternateClassName Ext.Msg
+     * @extends Ext.window.MessageBox
+     * @singleton
+     * Singleton instance of {@link Ext.window.MessageBox}.
+     */
     Ext.MessageBox = Ext.Msg = new this();
-});
\ No newline at end of file +});
+ +