Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / MessageBox.html
index 4ca3703..0d06229 100644 (file)
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/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>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
 </head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.MessageBox"></div>/**
- * @class Ext.MessageBox
- * <p>Utility class for generating different styles of message boxes.  The alias Ext.Msg can also be used.<p/>
- * <p>Note that the MessageBox is asynchronous.  Unlike a regular JavaScript <code>alert</code> (which will halt
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-window-MessageBox'>/**
+</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 <em>after</em> some user feedback from the MessageBox, you must use a callback function
- * (see the <code>function</code> parameter for {@link #show} for more details).</p>
- * <p>Example usage:</p>
- *<pre><code>
-// 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,
-   animEl: 'elId',
-   icon: Ext.MessageBox.QUESTION
-});
-</code></pre>
- * @singleton
+ * 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.MessageBox = function(){
-    var dlg, opt, mask, waitTimer,
-        bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl,
-        buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '',
-        buttonNames = ['ok', 'yes', 'no', 'cancel'];
-
-    // private
-    var handleButton = function(button){
-        buttons[button].blur();
-        if(dlg.isVisible()){
-            dlg.hide();
-            handleHide();
-            Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1);
-        }
-    };
+Ext.define('Ext.window.MessageBox', {
+    extend: 'Ext.window.Window',
 
-    // private
-    var handleHide = function(){
-        if(opt && opt.cls){
-            dlg.el.removeClass(opt.cls);
-        }
-        progressBar.reset();        
-    };
-
-    // private
-    var handleEsc = function(d, k, e){
-        if(opt && opt.closable !== false){
-            dlg.hide();
-            handleHide();
-        }
-        if(e){
-            e.stopEvent();
+    requires: [
+        'Ext.toolbar.Toolbar',
+        'Ext.form.field.Text',
+        'Ext.form.field.TextArea',
+        'Ext.button.Button',
+        'Ext.layout.container.Anchor',
+        'Ext.layout.container.HBox',
+        'Ext.ProgressBar'
+    ],
+
+    alias: 'widget.messagebox',
+
+<span id='Ext-window-MessageBox-property-OK'>    /**
+</span>     * Button config that displays a single OK button
+     * @type Number
+     */
+    OK : 1,
+<span id='Ext-window-MessageBox-property-YES'>    /**
+</span>     * Button config that displays a single Yes button
+     * @type Number
+     */
+    YES : 2,
+<span id='Ext-window-MessageBox-property-NO'>    /**
+</span>     * Button config that displays a single No button
+     * @type Number
+     */
+    NO : 4,
+<span id='Ext-window-MessageBox-property-CANCEL'>    /**
+</span>     * Button config that displays a single Cancel button
+     * @type Number
+     */
+    CANCEL : 8,
+<span id='Ext-window-MessageBox-property-OKCANCEL'>    /**
+</span>     * Button config that displays OK and Cancel buttons
+     * @type Number
+     */
+    OKCANCEL : 9,
+<span id='Ext-window-MessageBox-property-YESNO'>    /**
+</span>     * Button config that displays Yes and No buttons
+     * @type Number
+     */
+    YESNO : 6,
+<span id='Ext-window-MessageBox-property-YESNOCANCEL'>    /**
+</span>     * Button config that displays Yes, No and Cancel buttons
+     * @type Number
+     */
+    YESNOCANCEL : 14,
+<span id='Ext-window-MessageBox-property-INFO'>    /**
+</span>     * The CSS class that provides the INFO icon image
+     * @type String
+     */
+    INFO : 'ext-mb-info',
+<span id='Ext-window-MessageBox-property-WARNING'>    /**
+</span>     * The CSS class that provides the WARNING icon image
+     * @type String
+     */
+    WARNING : 'ext-mb-warning',
+<span id='Ext-window-MessageBox-property-QUESTION'>    /**
+</span>     * The CSS class that provides the QUESTION icon image
+     * @type String
+     */
+    QUESTION : 'ext-mb-question',
+<span id='Ext-window-MessageBox-property-ERROR'>    /**
+</span>     * The CSS class that provides the ERROR icon image
+     * @type String
+     */
+    ERROR : 'ext-mb-error',
+
+    // hide it by offsets. Windows are hidden on render by default.
+    hideMode: 'offsets',
+    closeAction: 'hide',
+    resizable: false,
+    title: '&amp;#160;',
+
+    width: 600,
+    height: 500,
+    minWidth: 250,
+    maxWidth: 600,
+    minHeight: 110,
+    maxHeight: 500,
+    constrain: true,
+
+    cls: Ext.baseCSSPrefix + 'message-box',
+
+    layout: {
+        type: 'anchor'
+    },
+
+<span id='Ext-window-MessageBox-property-defaultTextHeight'>    /**
+</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.
+     * @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.
+     * @type Number
+     */
+    minPromptWidth: 250,
+<span id='Ext-window-MessageBox-property-buttonText'>    /**
+</span>     * 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.
+     * Customize the default text like so: Ext.window.MessageBox.buttonText.yes = &quot;oui&quot;; //french
+     * @type Object
+     */
+    buttonText: {
+        ok: 'OK',
+        yes: 'Yes',
+        no: 'No',
+        cancel: 'Cancel'
+    },
+
+    buttonIds: [
+        'ok', 'yes', 'no', 'cancel'
+    ],
+
+    titleText: {
+        confirm: 'Confirm',
+        prompt: 'Prompt',
+        wait: 'Loading...',
+        alert: 'Attention'
+    },
+
+    iconHeight: 35,
+
+    makeButton: function(btnIdx) {
+        var btnId = this.buttonIds[btnIdx];
+        return Ext.create('Ext.button.Button', {
+            handler: this.btnCallback,
+            itemId: btnId,
+            scope: this,
+            text: this.buttonText[btnId],
+            minWidth: 75
+        });
+    },
+
+    btnCallback: function(btn) {
+        var me = this,
+            value,
+            field;
+
+        if (me.cfg.prompt || me.cfg.multiline) {
+            if (me.cfg.multiline) {
+                field = me.textArea;
+            } else {
+                field = me.textField;
+            }
+            value = field.getValue();
+            field.reset();
         }
-    };
-
-    // private
-    var updateButtons = function(b){
-        var width = 0,
-            cfg;
-        if(!b){
-            Ext.each(buttonNames, function(name){
-                buttons[name].hide();
-            });
-            return width;
+
+        // Important not to have focus remain in the hidden Window; Interferes with DnD.
+        btn.blur();
+        me.hide();
+        me.userCallback(btn.itemId, value, me.cfg);
+    },
+
+    hide: function() {
+        var me = this;
+        me.dd.endDrag();
+        me.progressBar.reset();
+        me.removeCls(me.cfg.cls);
+        me.callParent();
+    },
+
+    initComponent: function() {
+        var me = this,
+            i, button;
+
+        me.title = '&amp;#160;';
+
+        me.topContainer = Ext.create('Ext.container.Container', {
+            anchor: '100%',
+            style: {
+                padding: '10px',
+                overflow: 'hidden'
+            },
+            items: [
+                me.iconComponent = Ext.create('Ext.Component', {
+                    cls: 'ext-mb-icon',
+                    width: 50,
+                    height: me.iconHeight,
+                    style: {
+                        'float': 'left'
+                    }
+                }),
+                me.promptContainer = Ext.create('Ext.container.Container', {
+                    layout: {
+                        type: 'anchor'
+                    },
+                    items: [
+                        me.msg = Ext.create('Ext.Component', {
+                            autoEl: { tag: 'span' },
+                            cls: 'ext-mb-text'
+                        }),
+                        me.textField = Ext.create('Ext.form.field.Text', {
+                            anchor: '100%',
+                            enableKeyEvents: true,
+                            listeners: {
+                                keydown: me.onPromptKey,
+                                scope: me
+                            }
+                        }),
+                        me.textArea = Ext.create('Ext.form.field.TextArea', {
+                            anchor: '100%',
+                            height: 75
+                        })
+                    ]
+                })
+            ]
+        });
+        me.progressBar = Ext.create('Ext.ProgressBar', {
+            anchor: '-10',
+            style: 'margin-left:10px'
+        });
+
+        me.items = [me.topContainer, me.progressBar];
+
+        // Create the buttons based upon passed bitwise config
+        me.msgButtons = [];
+        for (i = 0; i &lt; 4; i++) {
+            button = me.makeButton(i);
+            me.msgButtons[button.itemId] = button;
+            me.msgButtons.push(button);
         }
-        dlg.footer.dom.style.display = '';
-        Ext.iterate(buttons, function(name, btn){
-            cfg = b[name];
-            if(cfg){
-                btn.show();
-                btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]);
-                width += btn.getEl().getWidth() + 15;
-            }else{
-                btn.hide();
-            }
+        me.bottomTb = Ext.create('Ext.toolbar.Toolbar', {
+            ui: 'footer',
+            dock: 'bottom',
+            layout: {
+                pack: 'center'
+            },
+            items: [
+                me.msgButtons[0],
+                me.msgButtons[1],
+                me.msgButtons[2],
+                me.msgButtons[3]
+            ]
         });
-        return width;
-    };
-
-    return {
-        <div id="method-Ext.MessageBox-getDialog"></div>/**
-         * Returns a reference to the underlying {@link Ext.Window} element
-         * @return {Ext.Window} The window
-         */
-        getDialog : function(titleText){
-           if(!dlg){
-                var btns = [];
-                
-                buttons = {};
-                Ext.each(buttonNames, function(name){
-                    btns.push(buttons[name] = new Ext.Button({
-                        text: this.buttonText[name],
-                        handler: handleButton.createCallback(name),
-                        hideMode: 'offsets'
-                    }));
-                }, this);
-                dlg = new Ext.Window({
-                    autoCreate : true,
-                    title:titleText,
-                    resizable:false,
-                    constrain:true,
-                    constrainHeader:true,
-                    minimizable : false,
-                    maximizable : false,
-                    stateful: false,
-                    modal: true,
-                    shim:true,
-                    buttonAlign:"center",
-                    width:400,
-                    height:100,
-                    minHeight: 80,
-                    plain:true,
-                    footer:true,
-                    closable:true,
-                    close : function(){
-                        if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
-                            handleButton("no");
-                        }else{
-                            handleButton("cancel");
-                        }
-                    },
-                    fbar: new Ext.Toolbar({
-                        items: btns,
-                        enableOverflow: false
-                    })
-                });
-                dlg.render(document.body);
-                dlg.getEl().addClass('x-window-dlg');
-                mask = dlg.mask;
-                bodyEl = dlg.body.createChild({
-                    html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>'
-                });
-                iconEl = Ext.get(bodyEl.dom.firstChild);
-                var contentEl = bodyEl.dom.childNodes[1];
-                msgEl = Ext.get(contentEl.firstChild);
-                textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
-                textboxEl.enableDisplayMode();
-                textboxEl.addKeyListener([10,13], function(){
-                    if(dlg.isVisible() && opt && opt.buttons){
-                        if(opt.buttons.ok){
-                            handleButton("ok");
-                        }else if(opt.buttons.yes){
-                            handleButton("yes");
-                        }
-                    }
-                });
-                textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
-                textareaEl.enableDisplayMode();
-                progressBar = new Ext.ProgressBar({
-                    renderTo:bodyEl
-                });
-               bodyEl.createChild({cls:'x-clear'});
-            }
-            return dlg;
-        },
-
-        <div id="method-Ext.MessageBox-updateText"></div>/**
-         * Updates the message box body text
-         * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
-         * the XHTML-compliant non-breaking space character '&amp;#160;')
-         * @return {Ext.MessageBox} this
-         */
-        updateText : function(text){
-            if(!dlg.isVisible() && !opt.width){
-                dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows
-            }
-            msgEl.update(text || '&#160;');
-
-            var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0,
-                mw = msgEl.getWidth() + msgEl.getMargins('lr'),
-                fw = dlg.getFrameWidth('lr'),
-                bw = dlg.body.getFrameWidth('lr'),
-                w;
-                
-            if (Ext.isIE && iw > 0){
-                //3 pixels get subtracted in the icon CSS for an IE margin issue,
-                //so we have to add it back here for the overall width to be consistent
-                iw += 3;
-            }
-            w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth),
-                    Math.max(opt.minWidth || this.minWidth, bwidth || 0));
+        me.dockedItems = [me.bottomTb];
+
+        me.callParent();
+    },
 
-            if(opt.prompt === true){
-                activeTextEl.setWidth(w-iw-fw-bw);
+    onPromptKey: function(textField, e) {
+        var me = this,
+            blur;
+
+        if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) {
+            if (me.msgButtons.ok.isVisible()) {
+                blur = true;
+                me.msgButtons.ok.handler.call(me, me.msgButtons.ok);
+            } else if (me.msgButtons.yes.isVisible()) {
+                me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
+                blur = true;
             }
-            if(opt.progress === true || opt.wait === true){
-                progressBar.setSize(w-iw-fw-bw);
+
+            if (blur) {
+                me.textField.blur();
             }
-            if(Ext.isIE && w == bwidth){
-                w += 4; //Add offset when the content width is smaller than the buttons.    
+        }
+    },
+
+    reconfigure: function(cfg) {
+        var me = this,
+            buttons = cfg.buttons || 0,
+            hideToolbar = true,
+            initialWidth = me.maxWidth,
+            i;
+
+        cfg = cfg || {};
+        me.cfg = cfg;
+        if (cfg.width) {
+            initialWidth = cfg.width;
+        }
+
+        // Default to allowing the Window to take focus.
+        delete me.defaultFocus;
+
+        // clear any old animateTarget
+        me.animateTarget = cfg.animateTarget || undefined;
+
+        // Defaults to modal
+        me.modal = cfg.modal !== false;
+
+        // Show the title
+        if (cfg.title) {
+            me.setTitle(cfg.title||'&amp;#160;');
+        }
+
+        if (!me.rendered) {
+            me.width = initialWidth;
+            me.render(Ext.getBody());
+        } else {
+            me.setSize(initialWidth, me.maxHeight);
+        }
+        me.setPosition(-10000, -10000);
+
+        // Hide or show the close tool
+        me.closable = cfg.closable &amp;&amp; !cfg.wait;
+        me.header.child('[type=close]').setVisible(cfg.closable !== false);
+
+        // Hide or show the header
+        if (!cfg.title &amp;&amp; !me.closable) {
+            me.header.hide();
+        } else {
+            me.header.show();
+        }
+
+        // Default to dynamic drag: drag the window, not a ghost
+        me.liveDrag = !cfg.proxyDrag;
+
+        // wrap the user callback
+        me.userCallback = Ext.Function.bind(cfg.callback ||cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
+
+        // Hide or show the icon Component
+        me.setIcon(cfg.icon);
+
+        // Hide or show the message area
+        if (cfg.msg) {
+            me.msg.update(cfg.msg);
+            me.msg.show();
+        } else {
+            me.msg.hide();
+        }
+
+        // Hide or show the input field
+        if (cfg.prompt || cfg.multiline) {
+            me.multiline = cfg.multiline;
+            if (cfg.multiline) {
+                me.textArea.setValue(cfg.value);
+                me.textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
+                me.textArea.show();
+                me.textField.hide();
+                me.defaultFocus = me.textArea;
+            } else {
+                me.textField.setValue(cfg.value);
+                me.textArea.hide();
+                me.textField.show();
+                me.defaultFocus = me.textField;
             }
-            dlg.setSize(w, 'auto').center();
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-updateProgress"></div>/**
-         * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
-         * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait},
-         * or by calling {@link Ext.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
-         * so that any existing body text will not get overwritten by default unless a new value is passed in)
-         * @return {Ext.MessageBox} this
-         */
-        updateProgress : function(value, progressText, msg){
-            progressBar.updateProgress(value, progressText);
-            if(msg){
-                this.updateText(msg);
+        } else {
+            me.textArea.hide();
+            me.textField.hide();
+        }
+
+        // Hide or show the progress bar
+        if (cfg.progress || cfg.wait) {
+            me.progressBar.show();
+            me.updateProgress(0, cfg.progressText);
+            if(cfg.wait === true){
+                me.progressBar.wait(cfg.waitConfig);
             }
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-isVisible"></div>/**
-         * Returns true if the message box is currently displayed
-         * @return {Boolean} True if the message box is visible, else false
-         */
-        isVisible : function(){
-            return dlg && dlg.isVisible();
-        },
-
-        <div id="method-Ext.MessageBox-hide"></div>/**
-         * Hides the message box if it is displayed
-         * @return {Ext.MessageBox} this
-         */
-        hide : function(){
-            var proxy = dlg ? dlg.activeGhost : null;
-            if(this.isVisible() || proxy){
-                dlg.hide();
-                handleHide();
-                if (proxy){
-                    // unghost is a private function, but i saw no better solution
-                    // to fix the locking problem when dragging while it closes
-                    dlg.unghost(false, false);
-                } 
+        } else {
+            me.progressBar.hide();
+        }
+
+        // Hide or show buttons depending on flag value sent.
+        for (i = 0; i &lt; 4; i++) {
+            if (buttons &amp; Math.pow(2, i)) {
+
+                // Default to focus on the first visible button if focus not already set
+                if (!me.defaultFocus) {
+                    me.defaultFocus = me.msgButtons[i];
+                }
+                me.msgButtons[i].show();
+                hideToolbar = false;
+            } else {
+                me.msgButtons[i].hide();
             }
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-show"></div>/**
-         * 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.
-         * @param {Object} config The following config options are supported: <ul>
-         * <li><b>animEl</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it
-         * opens and closes (defaults to undefined)</div></li>
-         * <li><b>buttons</b> : Object/Boolean<div class="sub-desc">A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
-         * cancel:'Bar'}), or false to not show any buttons (defaults to false)</div></li>
-         * <li><b>closable</b> : Boolean<div class="sub-desc">False to hide the top-right close button (defaults to true). Note that
-         * progress and wait dialogs will ignore this property and always hide the close button as they can only
-         * be closed programmatically.</div></li>
-         * <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li>
-         * <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea
-         * if displayed (defaults to 75)</div></li>
-         * <li><b>fn</b> : Function<div class="sub-desc">A callback function which is called when the dialog is dismissed either
-         * by clicking on the configured buttons, or on the dialog close button, or by pressing
-         * the return button to enter input.
-         * <p>Progress and wait dialogs will ignore this option since they do not respond to user
-         * actions and can only be closed programmatically, so any required function should be called
-         * by the same code after it closes the dialog. Parameters passed:<ul>
-         * <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul>
-         * <li><tt>ok</tt></li>
-         * <li><tt>yes</tt></li>
-         * <li><tt>no</tt></li>
-         * <li><tt>cancel</tt></li>
-         * </ul></div></div></li>
-         * <li><b>text</b> : String<div class="sub-desc">Value of the input field if either <tt><a href="#show-option-prompt" ext:member="show-option-prompt" ext:cls="Ext.MessageBox">prompt</a></tt>
-         * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.MessageBox">multiline</a></tt> is true</div></li>
-         * <li><b>opt</b> : Object<div class="sub-desc">The config object passed to show.</div></li>
-         * </ul></p></div></li>
-         * <li><b>scope</b> : Object<div class="sub-desc">The scope of the callback function</div></li>
-         * <li><b>icon</b> : String<div class="sub-desc">A CSS class that provides a background image to be used as the body icon for the
-         * dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li>
-         * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.Window#iconCls} to
-         * add an optional header icon (defaults to '')</div></li>
-         * <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li>
-         * <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li>
-         * <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is
-         * displayed (defaults to true)</div></li>
-         * <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the
-         * XHTML-compliant non-breaking space character '&amp;#160;')</div></li>
-         * <li><a id="show-option-multiline"></a><b>multiline</b> : Boolean<div class="sub-desc">
-         * True to prompt the user to enter multi-line text (defaults to false)</div></li>
-         * <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
-         * <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li>
-         * <li><a id="show-option-prompt"></a><b>prompt</b> : Boolean<div class="sub-desc">True to prompt the user to enter single-line text (defaults to false)</div></li>
-         * <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li>
-         * <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>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li>
-         * </ul>
-         * Example usage:
-         * <pre><code>
+        }
+
+        // Hide toolbar if no buttons to show
+        if (hideToolbar) {
+            me.bottomTb.hide();
+        } else {
+            me.bottomTb.show();
+        }
+    },
+
+<span id='Ext-window-MessageBox-method-show'>    /**
+</span>     * 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.
+     * @param {Object} config The following config options are supported: &lt;ul&gt;
+     * &lt;li&gt;&lt;b&gt;animateTarget&lt;/b&gt; : String/Element&lt;div class=&quot;sub-desc&quot;&gt;An id or Element from which the message box should animate as it
+     * opens and closes (defaults to undefined)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;buttons&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;A bitwise button specifier consisting of the sum of any of the following constants:&lt;ul&gt;
+     * &lt;li&gt;Ext.window.MessageBox.OK&lt;/li&gt;
+     * &lt;li&gt;Ext.window.MessageBox.YES&lt;/li&gt;
+     * &lt;li&gt;Ext.window.MessageBox.NO&lt;/li&gt;
+     * &lt;li&gt;Ext.window.MessageBox.CANCEL&lt;/li&gt;
+     * &lt;/ul&gt;Or false to not show any buttons (defaults to false)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;closable&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;False to hide the top-right close button (defaults to true). Note that
+     * progress and wait dialogs will ignore this property and always hide the close button as they can only
+     * be closed programmatically.&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;cls&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;A custom CSS class to apply to the message box's container element&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;defaultTextHeight&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The default height in pixels of the message box's multiline textarea
+     * if displayed (defaults to 75)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;fn&lt;/b&gt; : Function&lt;div class=&quot;sub-desc&quot;&gt;A callback function which is called when the dialog is dismissed either
+     * by clicking on the configured buttons, or on the dialog close button, or by pressing
+     * the return button to enter input.
+     * &lt;p&gt;Progress and wait dialogs will ignore this option since they do not respond to user
+     * actions and can only be closed programmatically, so any required function should be called
+     * by the same code after it closes the dialog. Parameters passed:&lt;ul&gt;
+     * &lt;li&gt;&lt;b&gt;buttonId&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The ID of the button pressed, one of:&lt;div class=&quot;sub-desc&quot;&gt;&lt;ul&gt;
+     * &lt;li&gt;&lt;tt&gt;ok&lt;/tt&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;tt&gt;yes&lt;/tt&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;tt&gt;no&lt;/tt&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;tt&gt;cancel&lt;/tt&gt;&lt;/li&gt;
+     * &lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;text&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;Value of the input field if either &lt;tt&gt;&lt;a href=&quot;#show-option-prompt&quot; ext:member=&quot;show-option-prompt&quot; ext:cls=&quot;Ext.window.MessageBox&quot;&gt;prompt&lt;/a&gt;&lt;/tt&gt;
+     * or &lt;tt&gt;&lt;a href=&quot;#show-option-multiline&quot; ext:member=&quot;show-option-multiline&quot; ext:cls=&quot;Ext.window.MessageBox&quot;&gt;multiline&lt;/a&gt;&lt;/tt&gt; is true&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;opt&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The config object passed to show.&lt;/div&gt;&lt;/li&gt;
+     * &lt;/ul&gt;&lt;/p&gt;&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;scope&lt;/b&gt; : Object&lt;div class=&quot;sub-desc&quot;&gt;The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the function will be executed.&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;icon&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;A CSS class that provides a background image to be used as the body icon for the
+     * dialog (e.g. Ext.window.MessageBox.WARNING or 'custom-class') (defaults to '')&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;iconCls&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The standard {@link Ext.window.Window#iconCls} to
+     * add an optional header icon (defaults to '')&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;maxWidth&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The maximum width in pixels of the message box (defaults to 600)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;minWidth&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The minimum width in pixels of the message box (defaults to 100)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;modal&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;False to allow user interaction with the page while the message box is
+     * displayed (defaults to true)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;msg&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;A string that will replace the existing message box body text (defaults to the
+     * XHTML-compliant non-breaking space character '&amp;amp;#160;')&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;a id=&quot;show-option-multiline&quot;&gt;&lt;/a&gt;&lt;b&gt;multiline&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;
+     * True to prompt the user to enter multi-line text (defaults to false)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;progress&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;progressText&lt;/b&gt; : String&lt;div class=&quot;sub-desc&quot;&gt;The text to display inside the progress bar if progress = true (defaults to '')&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;a id=&quot;show-option-prompt&quot;&gt;&lt;/a&gt;&lt;b&gt;prompt&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to prompt the user to enter single-line text (defaults to false)&lt;/div&gt;&lt;/li&gt;
+     * &lt;li&gt;&lt;b&gt;proxyDrag&lt;/b&gt; : Boolean&lt;div class=&quot;sub-desc&quot;&gt;True to display a lightweight proxy while dragging (defaults to false)&lt;/div&gt;&lt;/li&gt;
+     * &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#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:
+     * &lt;pre&gt;&lt;code&gt;
 Ext.Msg.show({
-   title: 'Address',
-   msg: 'Please enter your address:',
-   width: 300,
-   buttons: Ext.MessageBox.OKCANCEL,
-   multiline: true,
-   fn: saveAddress,
-   animEl: 'addAddressBtn',
-   icon: Ext.MessageBox.INFO
+title: 'Address',
+msg: 'Please enter your address:',
+width: 300,
+buttons: Ext.Msg.OKCANCEL,
+multiline: true,
+fn: saveAddress,
+animateTarget: 'addAddressBtn',
+icon: Ext.window.MessageBox.INFO
 });
-</code></pre>
-         * @return {Ext.MessageBox} this
-         */
-        show : function(options){
-            if(this.isVisible()){
-                this.hide();
-            }
-            opt = options;
-            var d = this.getDialog(opt.title || "&#160;");
-
-            d.setTitle(opt.title || "&#160;");
-            var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
-            d.tools.close.setDisplayed(allowClose);
-            activeTextEl = textboxEl;
-            opt.prompt = opt.prompt || (opt.multiline ? true : false);
-            if(opt.prompt){
-                if(opt.multiline){
-                    textboxEl.hide();
-                    textareaEl.show();
-                    textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
-                    activeTextEl = textareaEl;
-                }else{
-                    textboxEl.show();
-                    textareaEl.hide();
-                }
-            }else{
-                textboxEl.hide();
-                textareaEl.hide();
-            }
-            activeTextEl.dom.value = opt.value || "";
-            if(opt.prompt){
-                d.focusEl = activeTextEl;
-            }else{
-                var bs = opt.buttons;
-                var db = null;
-                if(bs && bs.ok){
-                    db = buttons["ok"];
-                }else if(bs && bs.yes){
-                    db = buttons["yes"];
-                }
-                if (db){
-                    d.focusEl = db;
-                }
-            }
-            if(opt.iconCls){
-              d.setIconClass(opt.iconCls);
-            }
-            this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
-            bwidth = updateButtons(opt.buttons);
-            progressBar.setVisible(opt.progress === true || opt.wait === true);
-            this.updateProgress(0, opt.progressText);
-            this.updateText(opt.msg);
-            if(opt.cls){
-                d.el.addClass(opt.cls);
-            }
-            d.proxyDrag = opt.proxyDrag === true;
-            d.modal = opt.modal !== false;
-            d.mask = opt.modal !== false ? mask : false;
-            if(!d.isVisible()){
-                // force it to the end of the z-index stack so it gets a cursor in FF
-                document.body.appendChild(dlg.el.dom);
-                d.setAnimateTarget(opt.animEl);
-                //workaround for window internally enabling keymap in afterShow
-                d.on('show', function(){
-                    if(allowClose === true){
-                        d.keyMap.enable();
-                    }else{
-                        d.keyMap.disable();
-                    }
-                }, this, {single:true});
-                d.show(opt.animEl);
-            }
-            if(opt.wait === true){
-                progressBar.wait(opt.waitConfig);
-            }
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-setIcon"></div>/**
-         * 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.
-         * The following built-in icon classes are supported, but you can also pass in a custom class name:
-         * <pre>
-Ext.MessageBox.INFO
-Ext.MessageBox.WARNING
-Ext.MessageBox.QUESTION
-Ext.MessageBox.ERROR
-         *</pre>
-         * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
-         * @return {Ext.MessageBox} this
-         */
-        setIcon : function(icon){
-            if(!dlg){
-                bufferIcon = icon;
-                return;
-            }
-            bufferIcon = undefined;
-            if(icon && icon != ''){
-                iconEl.removeClass('x-hidden');
-                iconEl.replaceClass(iconCls, icon);
-                bodyEl.addClass('x-dlg-icon');
-                iconCls = icon;
-            }else{
-                iconEl.replaceClass(iconCls, 'x-hidden');
-                bodyEl.removeClass('x-dlg-icon');
-                iconCls = '';
-            }
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-progress"></div>/**
-         * 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.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 '')
-         * @return {Ext.MessageBox} this
-         */
-        progress : function(title, msg, progressText){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: false,
-                progress:true,
-                closable:false,
-                minWidth: this.minProgressWidth,
-                progressText: progressText
-            });
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-wait"></div>/**
-         * 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
-         * @return {Ext.MessageBox} this
-         */
-        wait : function(msg, title, config){
-            this.show({
+&lt;/code&gt;&lt;/pre&gt;
+     * @return {Ext.window.MessageBox} this
+     */
+    show: function(cfg) {
+        var me = this;
+
+        me.reconfigure(cfg);
+        me.addCls(cfg.cls);
+        if (cfg.animateTarget) {
+            me.doAutoSize(true);
+            me.callParent();
+        } else {
+            me.callParent();
+            me.doAutoSize(true);
+        }
+        return me;
+    },
+
+    afterShow: function(){
+        if (this.animateTarget) {
+            this.center();
+        }
+        this.callParent(arguments);
+    },
+
+    doAutoSize: function(center) {
+        var me = this,
+            icon = me.iconComponent,
+            iconHeight = me.iconHeight;
+
+        if (!Ext.isDefined(me.frameWidth)) {
+            me.frameWidth = me.el.getWidth() - me.body.getWidth();
+        }
+
+        // reset to the original dimensions
+        icon.setHeight(iconHeight);
+
+        // Allow per-invocation override of minWidth
+        me.minWidth = me.cfg.minWidth || Ext.getClass(this).prototype.minWidth;
+
+        // Set best possible size based upon allowing the text to wrap in the maximized Window, and
+        // then constraining it to within the max with. Then adding up constituent element heights.
+        me.topContainer.doLayout();
+        if (Ext.isIE6 || Ext.isIEQuirks) {
+            // In IE quirks, the initial full width of the prompt fields will prevent the container element
+            // from collapsing once sized down, so temporarily force them to a small width. They'll get
+            // layed out to their final width later when setting the final window size.
+            me.textField.setCalculatedSize(9);
+            me.textArea.setCalculatedSize(9);
+        }
+        var width = me.cfg.width || me.msg.getWidth() + icon.getWidth() + 25, /* topContainer's layout padding */
+            height = (me.header.rendered ? me.header.getHeight() : 0) +
+            Math.max(me.promptContainer.getHeight(), icon.getHeight()) +
+            me.progressBar.getHeight() +
+            (me.bottomTb.rendered ? me.bottomTb.getHeight() : 0) + 20 ;/* topContainer's layout padding */
+
+        // Update to the size of the content, this way the text won't wrap under the icon.
+        icon.setHeight(Math.max(iconHeight, me.msg.getHeight()));
+        me.setSize(width + me.frameWidth, height + me.frameWidth);
+        if (center) {
+            me.center();
+        }
+        return me;
+    },
+
+    updateText: function(text) {
+        this.msg.update(text);
+        return this.doAutoSize(true);
+    },
+
+<span id='Ext-window-MessageBox-method-setIcon'>    /**
+</span>     * 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.
+     * The following built-in icon classes are supported, but you can also pass in a custom class name:
+     * &lt;pre&gt;
+Ext.window.MessageBox.INFO
+Ext.window.MessageBox.WARNING
+Ext.window.MessageBox.QUESTION
+Ext.window.MessageBox.ERROR
+     *&lt;/pre&gt;
+     * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
+     * @return {Ext.window.MessageBox} this
+     */
+    setIcon : function(icon) {
+        var me = this;
+        me.iconComponent.removeCls(me.iconCls);
+        if (icon) {
+            me.iconComponent.show();
+            me.iconComponent.addCls(Ext.baseCSSPrefix + 'dlg-icon');
+            me.iconComponent.addCls(me.iconCls = icon);
+        } else {
+            me.iconComponent.removeCls(Ext.baseCSSPrefix + 'dlg-icon');
+            me.iconComponent.hide();
+        }
+        return me;
+    },
+
+<span id='Ext-window-MessageBox-method-updateProgress'>    /**
+</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=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
+     */
+    updateProgress : function(value, progressText, msg){
+        this.progressBar.updateProgress(value, progressText);
+        if (msg){
+            this.updateText(msg);
+        }
+        return this;
+    },
+
+    onEsc: function() {
+        if (this.closable !== false) {
+            this.callParent(arguments);
+        }
+    },
+
+<span id='Ext-window-MessageBox-method-confirm'>    /**
+</span>     * 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
+     * (could also be the top-right close button).
+     * @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.
+     * @return {Ext.window.MessageBox} this
+     */
+    confirm: function(cfg, msg, fn, scope) {
+        if (Ext.isString(cfg)) {
+            cfg = {
+                title: cfg,
+                icon: 'ext-mb-question',
+                msg: msg,
+                buttons: this.YESNO,
+                callback: fn,
+                scope: scope
+            };
+        }
+        return this.show(cfg);
+    },
+
+<span id='Ext-window-MessageBox-method-prompt'>    /**
+</span>     * 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] 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){
+        if (Ext.isString(cfg)) {
+            cfg = {
+                prompt: true,
+                title: cfg,
+                minWidth: this.minPromptWidth,
+                msg: msg,
+                buttons: this.OKCANCEL,
+                callback: fn,
+                scope: scope,
+                multiline: multiline,
+                value: value
+            };
+        }
+        return this.show(cfg);
+    },
+
+<span id='Ext-window-MessageBox-method-wait'>    /**
+</span>     * 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#wait} config object
+     * @return {Ext.window.MessageBox} this
+     */
+    wait : function(cfg, title, config){
+        if (Ext.isString(cfg)) {
+            cfg = {
                 title : title,
-                msg : msg,
-                buttons: false,
-                closable:false,
-                wait:true,
-                modal:true,
+                msg : cfg,
+                closable: false,
+                wait: true,
+                modal: true,
                 minWidth: this.minProgressWidth,
                 waitConfig: config
-            });
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-alert"></div>/**
-         * 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
-         * (could also be the top-right close button).
-         * @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.
-         * @return {Ext.MessageBox} this
-         */
-        alert : function(title, msg, fn, scope){
-            this.show({
-                title : title,
+            };
+        }
+        return this.show(cfg);
+    },
+
+<span id='Ext-window-MessageBox-method-alert'>    /**
+</span>     * 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
+     * (could also be the top-right close button).
+     * @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.
+     * @return {Ext.window.MessageBox} this
+     */
+    alert: function(cfg, msg, fn, scope) {
+        if (Ext.isString(cfg)) {
+            cfg = {
+                title : cfg,
                 msg : msg,
                 buttons: this.OK,
                 fn: fn,
                 scope : scope,
                 minWidth: this.minWidth
-            });
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-confirm"></div>/**
-         * 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
-         * (could also be the top-right close button).
-         * @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.
-         * @return {Ext.MessageBox} this
-         */
-        confirm : function(title, msg, fn, scope){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.YESNO,
-                fn: fn,
-                scope : scope,
-                icon: this.QUESTION,
-                minWidth: this.minWidth
-            });
-            return this;
-        },
-
-        <div id="method-Ext.MessageBox-prompt"></div>/**
-         * 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 '')
-         * @return {Ext.MessageBox} this
-         */
-        prompt : function(title, msg, fn, scope, multiline, value){
-            this.show({
-                title : title,
-                msg : msg,
-                buttons: this.OKCANCEL,
-                fn: fn,
-                minWidth: this.minPromptWidth,
-                scope : scope,
-                prompt:true,
-                multiline: multiline,
-                value: value
-            });
-            return this;
-        },
-
-        <div id="prop-Ext.MessageBox-OK"></div>/**
-         * Button config that displays a single OK button
-         * @type Object
-         */
-        OK : {ok:true},
-        <div id="prop-Ext.MessageBox-CANCEL"></div>/**
-         * Button config that displays a single Cancel button
-         * @type Object
-         */
-        CANCEL : {cancel:true},
-        <div id="prop-Ext.MessageBox-OKCANCEL"></div>/**
-         * Button config that displays OK and Cancel buttons
-         * @type Object
-         */
-        OKCANCEL : {ok:true, cancel:true},
-        <div id="prop-Ext.MessageBox-YESNO"></div>/**
-         * Button config that displays Yes and No buttons
-         * @type Object
-         */
-        YESNO : {yes:true, no:true},
-        <div id="prop-Ext.MessageBox-YESNOCANCEL"></div>/**
-         * Button config that displays Yes, No and Cancel buttons
-         * @type Object
-         */
-        YESNOCANCEL : {yes:true, no:true, cancel:true},
-        <div id="prop-Ext.MessageBox-INFO"></div>/**
-         * The CSS class that provides the INFO icon image
-         * @type String
-         */
-        INFO : 'ext-mb-info',
-        <div id="prop-Ext.MessageBox-WARNING"></div>/**
-         * The CSS class that provides the WARNING icon image
-         * @type String
-         */
-        WARNING : 'ext-mb-warning',
-        <div id="prop-Ext.MessageBox-QUESTION"></div>/**
-         * The CSS class that provides the QUESTION icon image
-         * @type String
-         */
-        QUESTION : 'ext-mb-question',
-        <div id="prop-Ext.MessageBox-ERROR"></div>/**
-         * The CSS class that provides the ERROR icon image
-         * @type String
-         */
-        ERROR : 'ext-mb-error',
-
-        <div id="prop-Ext.MessageBox-defaultTextHeight"></div>/**
-         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
-         * @type Number
-         */
-        defaultTextHeight : 75,
-        <div id="prop-Ext.MessageBox-maxWidth"></div>/**
-         * The maximum width in pixels of the message box (defaults to 600)
-         * @type Number
-         */
-        maxWidth : 600,
-        <div id="prop-Ext.MessageBox-minWidth"></div>/**
-         * The minimum width in pixels of the message box (defaults to 100)
-         * @type Number
-         */
-        minWidth : 100,
-        <div id="prop-Ext.MessageBox-minProgressWidth"></div>/**
-         * 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).
-         * @type Number
-         */
-        minProgressWidth : 250,
-        <div id="prop-Ext.MessageBox-minPromptWidth"></div>/**
-         * 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).
-         * @type Number
-         */
-        minPromptWidth: 250,
-        <div id="prop-Ext.MessageBox-buttonText"></div>/**
-         * 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.
-         * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
-         * @type Object
-         */
-        buttonText : {
-            ok : "OK",
-            cancel : "Cancel",
-            yes : "Yes",
-            no : "No"
+            };
         }
-    };
-}();
+        return this.show(cfg);
+    },
 
-<div id="prop-Ext.MessageBox-Msg"></div>/**
- * Shorthand for {@link Ext.MessageBox}
- */
-Ext.Msg = Ext.MessageBox;</pre>    
+<span id='Ext-window-MessageBox-method-progress'>    /**
+</span>     * 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=''] The text to display inside the progress bar
+     * @return {Ext.window.MessageBox} this
+     */
+    progress : function(cfg, msg, progressText){
+        if (Ext.isString(cfg)) {
+            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>
-</html>
\ No newline at end of file
+</html>