add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / window / MessageBox.js

// @define Ext.MessageBox, Ext.Msg\r
\r
/**\r
 * Utility class for generating different styles of message boxes.  The singleton instance, Ext.MessageBox\r
 * alias `Ext.Msg` can also be used.\r
 *\r
 * Note that a MessageBox is asynchronous.  Unlike a regular JavaScript `alert` (which will halt\r
 * browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code\r
 * that should only run *after* some user feedback from the MessageBox, you must use a callback function\r
 * (see the `function` parameter for {@link #method-show} for more details).\r
 *\r
 * Basic alert\r
 *\r
 *     @example\r
 *     Ext.Msg.alert('Status', 'Changes saved successfully.');\r
 *\r
 * Prompt for user data and process the result using a callback\r
 *\r
 *     @example\r
 *     Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){\r
 *         if (btn == 'ok'){\r
 *             // process text value and close...\r
 *         }\r
 *     });\r
 *\r
 * Show a dialog using config options\r
 *\r
 *     @example\r
 *     Ext.Msg.show({\r
 *         title:'Save Changes?',\r
 *         message: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',\r
 *         buttons: Ext.Msg.YESNOCANCEL,\r
 *         icon: Ext.Msg.QUESTION,\r
 *         fn: function(btn) {\r
 *             if (btn === 'yes') {\r
 *                 console.log('Yes pressed');\r
 *             } else if (btn === 'no') {\r
 *                 console.log('No pressed');\r
 *             } else {\r
 *                 console.log('Cancel pressed');\r
 *             } \r
 *         }\r
 *     });\r
 * \r
 * Showing Ext.Msg while it's already shown will cause the visible instance to be \r
 * overwritten with the newly passed config.  While this may be the desired outcome, you \r
 * can also create a new MessageBox that can exist alongside the Ext.Msg \r
 * singleton instance.\r
 * \r
 *     @example\r
 *     var myMsg = Ext.create('Ext.window.MessageBox', {\r
 *         // set closeAction to 'destroy' if this instance is not\r
 *         // intended to be reused by the application\r
 *         closeAction: 'destroy'\r
 *     }).show({\r
 *         title: 'Custom MessageBox Instance',\r
 *         message: 'I can exist along with Ext.Msg'\r
 *     });\r
 *     \r
 *     Ext.Msg.alert('Overlapping', 'Ext.Msg instance');\r
 */\r
Ext.define('Ext.window.MessageBox', {\r
    extend: 'Ext.window.Window',\r
\r
    requires: [\r
        'Ext.toolbar.Toolbar',\r
        'Ext.form.field.Text',\r
        'Ext.form.field.TextArea',\r
        'Ext.button.Button',\r
        'Ext.layout.container.Anchor',\r
        'Ext.layout.container.HBox',\r
        'Ext.ProgressBar'\r
    ],\r
\r
    alias: 'widget.messagebox',\r
\r
    /**\r
     * @property\r
     * Button config that displays a single OK button\r
     */\r
    OK : 1,\r
    /**\r
     * @property\r
     * Button config that displays a single Yes button\r
     */\r
    YES : 2,\r
    /**\r
     * @property\r
     * Button config that displays a single No button\r
     */\r
    NO : 4,\r
    /**\r
     * @property\r
     * Button config that displays a single Cancel button\r
     */\r
    CANCEL : 8,\r
    /**\r
     * @property\r
     * Button config that displays OK and Cancel buttons\r
     */\r
    OKCANCEL : 9,\r
    /**\r
     * @property\r
     * Button config that displays Yes and No buttons\r
     */\r
    YESNO : 6,\r
    /**\r
     * @property\r
     * Button config that displays Yes, No and Cancel buttons\r
     */\r
    YESNOCANCEL : 14,\r
    /**\r
     * @property\r
     * The CSS class that provides the INFO icon image\r
     */\r
    INFO : Ext.baseCSSPrefix + 'message-box-info',\r
    /**\r
     * @property\r
     * The CSS class that provides the WARNING icon image\r
     */\r
    WARNING : Ext.baseCSSPrefix + 'message-box-warning',\r
    /**\r
     * @property\r
     * The CSS class that provides the QUESTION icon image\r
     */\r
    QUESTION : Ext.baseCSSPrefix + 'message-box-question',\r
    /**\r
     * @property\r
     * The CSS class that provides the ERROR icon image\r
     */\r
    ERROR : Ext.baseCSSPrefix + 'message-box-error',\r
\r
    // hide it by offsets. Windows are hidden on render by default.\r
    hideMode: 'offsets',\r
    closeAction: 'hide',\r
    resizable: false,\r
    scrollable: true,\r
    title: ' ',\r
\r
    defaultMinWidth: 250,\r
    defaultMaxWidth: 600,\r
    defaultMinHeight: 110,\r
    defaultMaxHeight: 500,\r
    \r
    // Forcibly set these to null on the prototype to override anything set higher in\r
    // the hierarchy\r
    minWidth: null,\r
    maxWidth: null,\r
    minHeight: null,\r
    maxHeight: null,\r
    constrain: true,\r
\r
    cls: [Ext.baseCSSPrefix + 'message-box', Ext.baseCSSPrefix + 'hidden-offsets'],\r
\r
    layout: {\r
        type: 'vbox',\r
        align: 'stretch'\r
    },\r
\r
    // We want to shrinkWrap around all docked items\r
    shrinkWrapDock: true,\r
\r
    /**\r
     * @property\r
     * The default height in pixels of the message box's multiline textarea if displayed.\r
     */\r
    defaultTextHeight : 75,\r
    /**\r
     * @property\r
     * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful\r
     * for setting a different minimum width than text-only dialogs may need.\r
     */\r
    minProgressWidth : 250,\r
    /**\r
     * @property\r
     * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful\r
     * for setting a different minimum width than text-only dialogs may need.\r
     */\r
    minPromptWidth: 250,\r
    //<locale type="object">\r
    /**\r
     * @property\r
     * An object containing the default button text strings that can be overriden for localized language support.\r
     * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific\r
     * resource file for handling language support across the framework.\r
     * Customize the default text like so:\r
     *\r
     *     Ext.window.MessageBox.buttonText.yes = "oui"; //french\r
     */\r
    buttonText: {\r
        ok: 'OK',\r
        yes: 'Yes',\r
        no: 'No',\r
        cancel: 'Cancel'\r
    },\r
    //</locale>\r
\r
    buttonIds: [\r
        'ok', 'yes', 'no', 'cancel'\r
    ],\r
\r
    //<locale type="object">\r
    titleText: {\r
        confirm: 'Confirm',\r
        prompt: 'Prompt',\r
        wait: 'Loading...',\r
        alert: 'Attention'\r
    },\r
    //</locale>\r
\r
    baseIconCls: Ext.baseCSSPrefix + 'message-box-icon',\r
    \r
    ariaRole: 'alertdialog',\r
\r
    makeButton: function(btnIdx) {\r
        var btnId = this.buttonIds[btnIdx];\r
        return new Ext.button.Button({\r
            handler: this.btnCallback,\r
            itemId: btnId,\r
            scope: this,\r
            text: this.buttonText[btnId],\r
            minWidth: 75\r
        });\r
    },\r
\r
    btnCallback: function(btn, event) {\r
        var me = this,\r
            value,\r
            field;\r
\r
        // If this is caused by a keydown event (eg: SPACE on a Button), then the\r
        // hide will throw focus back to the previously focused element which will\r
        // then recieve an unexpected keyup event.\r
        // So defer callback handling until the upcoming keyup event.\r
        if (event && event.type === 'keydown' && !event.isSpecialKey()) {\r
            event.getTarget(null, null, true).on({\r
                keyup: function(e) {\r
                    me.btnCallback(btn, e);\r
                },\r
                single: true\r
            });\r
            return;\r
        }\r
\r
        if (me.cfg.prompt || me.cfg.multiline) {\r
            if (me.cfg.multiline) {\r
                field = me.textArea;\r
            } else {\r
                field = me.textField;\r
            }\r
            value = field.getValue();\r
            field.reset();\r
        }\r
\r
        // Component.onHide blurs the active element if the Component contains the active element\r
        me.hide();\r
        me.userCallback(btn.itemId, value, me.cfg);\r
    },\r
\r
    hide: function() {\r
        var me = this,\r
            cls = me.cfg ? me.cfg.cls : '';\r
\r
        me.progressBar.reset();\r
        if (cls) {\r
            me.removeCls(cls);\r
        }\r
        me.callParent(arguments);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    constructor: function(cfg) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        // set the default min/max/Width/Height to the initially configured min/max/Width/Height\r
        // so that it will be used as the default when reconfiguring.\r
        me.minWidth = me.defaultMinWidth = (me.minWidth || me.defaultMinWidth);\r
        me.maxWidth = me.defaultMaxWidth = (me.maxWidth || me.defaultMaxWidth);\r
        me.minHeight = me.defaultMinHeight = (me.minHeight || me.defaultMinHeight);\r
        me.maxHeight = me.defaultMaxHeight = (me.maxHeight || me.defaultMaxHeight);\r
    },\r
\r
    initComponent: function(cfg) {\r
        var me = this,\r
            baseId = me.id,\r
            i, button;\r
\r
        // A title or iconCls could have been passed in the config to the constructor.\r
        me.title = me.title || '&#160;';\r
        me.iconCls = me.iconCls || '';\r
\r
        me.topContainer = new Ext.container.Container({\r
            layout: 'hbox',\r
            padding: 10,\r
            style: {\r
                overflow: 'hidden'\r
            },\r
            items: [\r
                me.iconComponent = new Ext.Component({\r
                    cls: me.baseIconCls\r
                }),\r
                me.promptContainer = new Ext.container.Container({\r
                    flex: 1,\r
                    layout: {\r
                        type: 'vbox',\r
                        align: 'stretch'\r
                    },\r
                    items: [\r
                        me.msg = new Ext.Component({\r
                            id: baseId + '-msg',\r
                            cls: me.baseCls + '-text'\r
                        }),\r
                        me.textField = new Ext.form.field.Text({\r
                            id: baseId + '-textfield',\r
                            enableKeyEvents: true,\r
                            listeners: {\r
                                keydown: me.onPromptKey,\r
                                scope: me\r
                            }\r
                        }),\r
                        me.textArea = new Ext.form.field.TextArea({\r
                            id: baseId + '-textarea',\r
                            height: 75\r
                        })\r
                    ]\r
                })\r
            ]\r
        });\r
\r
        me.progressBar = new Ext.ProgressBar({\r
            id: baseId + '-progressbar',\r
            margin: '0 10 10 10'\r
        });\r
\r
        me.items = [me.topContainer, me.progressBar];\r
\r
        // Create the buttons based upon passed bitwise config\r
        me.msgButtons = [];\r
        for (i = 0; i < 4; i++) {\r
            button = me.makeButton(i);\r
            me.msgButtons[button.itemId] = button;\r
            me.msgButtons.push(button);\r
        }\r
        me.bottomTb = new Ext.toolbar.Toolbar({\r
            id: baseId + '-toolbar',\r
            ui: 'footer',\r
            dock: 'bottom',\r
            layout: {\r
                pack: 'center'\r
            },\r
            items: [\r
                me.msgButtons[0],\r
                me.msgButtons[1],\r
                me.msgButtons[2],\r
                me.msgButtons[3]\r
            ]\r
        });\r
        me.dockedItems = [me.bottomTb];\r
        me.on('close', me.onClose, me);\r
        me.callParent();\r
    },\r
\r
    onClose: function(){\r
        var btn = this.header.child('[type=close]');\r
        \r
        if (btn) {\r
            // Give a temporary itemId so it can act like the cancel button\r
            btn.itemId = 'cancel';\r
            this.btnCallback(btn);\r
            delete btn.itemId;\r
        }\r
    },\r
\r
    onPromptKey: function(textField, e) {\r
        var me = this;\r
\r
        if (e.keyCode === e.RETURN || e.keyCode === 10) {\r
            if (me.msgButtons.ok.isVisible()) {\r
                me.msgButtons.ok.handler.call(me, me.msgButtons.ok);\r
            } else if (me.msgButtons.yes.isVisible()) {\r
                me.msgButtons.yes.handler.call(me, me.msgButtons.yes);\r
            }\r
        }\r
    },\r
\r
    reconfigure: function(cfg) {\r
        var me = this,\r
            buttons = 0,\r
            hideToolbar = true,\r
            oldButtonText = me.buttonText,\r
            resizer = me.resizer,\r
            header = me.header,\r
            headerCfg = header && !header.isHeader,\r
            message = cfg && (cfg.message || cfg.msg),\r
            resizeTracker, width, height, i, textArea,\r
            textField, msg, progressBar, msgButtons, wait, tool;\r
\r
        // Restore default buttonText before reconfiguring.\r
        me.updateButtonText();\r
\r
        me.cfg = cfg = cfg || {};\r
\r
        wait = cfg.wait;\r
        if (cfg.width) {\r
            width = cfg.width;\r
        }\r
\r
        if (cfg.height) {\r
            height = cfg.height;\r
        }\r
\r
        me.minWidth = cfg.minWidth || me.defaultMinWidth;\r
        me.maxWidth = cfg.maxWidth || me.defaultMaxWidth;\r
        me.minHeight = cfg.minHeight || me.defaultMinHeight;\r
        me.maxHeight = cfg.maxHeight || me.defaultMaxHeight;\r
\r
        if (resizer) {\r
            resizeTracker = resizer.resizeTracker;\r
            resizer.minWidth = resizeTracker.minWidth = me.minWidth;\r
            resizer.maxWidth = resizeTracker.maxWidth = me.maxWidth;\r
            resizer.minHeight = resizeTracker.minHeight = me.minHeight;\r
            resizer.maxHeight = resizeTracker.maxHeight = me.maxHeight;\r
        }\r
\r
        // Default to allowing the Window to take focus.\r
        delete me.defaultFocus;\r
        if (cfg.defaultFocus) {\r
            me.defaultFocus = cfg.defaultFocus;\r
        }\r
\r
        // clear any old animateTarget\r
        me.animateTarget = cfg.animateTarget || undefined;\r
\r
        // Defaults to modal\r
        me.modal = cfg.modal !== false;\r
\r
        // Show the title/icon if a title/iconCls config was passed in the config to either the constructor\r
        // or the show() method. Note that anything passed in the config should win.\r
        //\r
        // Note that if there is no title/iconCls in the config, check the headerCfg and default to the instance\r
        // properties. This works because there are default values defined in initComponent.\r
        me.setTitle(cfg.title || (headerCfg && header.title) || me.title);\r
        me.setIconCls(cfg.iconCls || (headerCfg && header.iconCls) || me.iconCls);\r
\r
        // Extract button configs\r
        if (Ext.isObject(cfg.buttons)) {\r
            me.buttonText = cfg.buttons;\r
            buttons = 0;\r
        } else {\r
            me.buttonText = cfg.buttonText || me.buttonText;\r
            buttons = Ext.isNumber(cfg.buttons) ? cfg.buttons : 0;\r
        }\r
\r
        // Apply custom-configured buttonText\r
        // Infer additional buttons from the specified property names in the buttonText object\r
        buttons = buttons | me.updateButtonText();\r
\r
        // Restore buttonText. Next run of reconfigure will restore to prototype's buttonText\r
        me.buttonText = oldButtonText;\r
\r
        // During the on render, or size resetting layouts, and in subsequent hiding and showing, we need to\r
        // suspend layouts, and flush at the end when the Window's children are at their final visibility.\r
        Ext.suspendLayouts();\r
        me.width = me.height = null;\r
        if (width || height) {\r
            if (width) {\r
                me.setWidth(width);\r
            }\r
\r
            if (height) {\r
                me.setHeight(height);\r
            }\r
        }\r
        me.hidden = false;\r
        if (!me.rendered) {\r
            me.render(Ext.getBody());\r
        }\r
\r
        // Hide or show the close tool\r
        me.closable = cfg.closable !== false && !wait;\r
\r
        // We need to redefine `header` because me.setIconCls() could create a Header instance.\r
        header = me.header;\r
\r
        if (header) {\r
            tool = header.child('[type=close]');\r
            \r
            if (tool) {\r
                tool.setVisible(me.closable);\r
            }\r
\r
            // Hide or show the header\r
            if (!cfg.title && !me.closable && !cfg.iconCls) {\r
                header.hide();\r
            } else {\r
                header.show();\r
            }\r
        }\r
\r
        // Default to dynamic drag: drag the window, not a ghost\r
        me.liveDrag = !cfg.proxyDrag;\r
\r
        // wrap the user callback\r
        me.userCallback = Ext.Function.bindCallback(cfg.callback ||cfg.fn || Ext.emptyFn,\r
            cfg.scope || Ext.global);\r
\r
        // Hide or show the icon Component\r
        me.setIcon(cfg.icon);\r
\r
        // Hide or show the message area\r
        msg = me.msg;\r
        if (message) {\r
            msg.setHtml(message);\r
            msg.show();\r
        } else {\r
            msg.hide();\r
        }\r
\r
        // Hide or show the input field\r
        textArea = me.textArea;\r
        textField = me.textField;\r
        if (cfg.prompt || cfg.multiline) {\r
            me.multiline = cfg.multiline;\r
            if (cfg.multiline) {\r
                textArea.setValue(cfg.value);\r
                textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);\r
                textArea.show();\r
                textField.hide();\r
                me.defaultFocus = textArea;\r
            } else {\r
                textField.setValue(cfg.value);\r
                textArea.hide();\r
                textField.show();\r
                me.defaultFocus = textField;\r
            }\r
        } else {\r
            textArea.hide();\r
            textField.hide();\r
        }\r
\r
        // Hide or show the progress bar\r
        progressBar = me.progressBar;\r
        if (cfg.progress || wait) {\r
            progressBar.show();\r
            me.updateProgress(0, cfg.progressText);\r
            if (wait) {\r
                progressBar.wait(wait === true ? cfg.waitConfig : wait);\r
            }\r
        } else {\r
            progressBar.hide();\r
        }\r
\r
        // Hide or show buttons depending on flag value sent.\r
        msgButtons = me.msgButtons;\r
        for (i = 0; i < 4; i++) {\r
            if (buttons & Math.pow(2, i)) {\r
\r
                // Default to focus on the first visible button if focus not already set\r
                if (!me.defaultFocus) {\r
                    me.defaultFocus = msgButtons[i];\r
                }\r
                msgButtons[i].show();\r
                hideToolbar = false;\r
            } else {\r
                msgButtons[i].hide();\r
            }\r
        }\r
\r
        // Hide toolbar if no buttons to show\r
        if (hideToolbar) {\r
            me.bottomTb.hide();\r
        } else {\r
            me.bottomTb.show();\r
        }\r
        Ext.resumeLayouts(true);\r
    },\r
\r
    /**\r
     * @private\r
     * Set button text according to current buttonText property object\r
     * @return {Number} The buttons bitwise flag based upon the button IDs specified in the buttonText property.\r
     */\r
    updateButtonText: function() {\r
        var me = this,\r
            buttonText = me.buttonText,\r
            buttons = 0,\r
            btnId,\r
            btn;\r
\r
        for (btnId in buttonText) {\r
            if (buttonText.hasOwnProperty(btnId)) {\r
                btn = me.msgButtons[btnId];\r
                if (btn) {\r
                    if (me.cfg && me.cfg.buttonText) {\r
                        buttons = buttons | Math.pow(2, Ext.Array.indexOf(me.buttonIds, btnId));\r
                    }\r
                    if (btn.text !== buttonText[btnId]) {\r
                        btn.setText(buttonText[btnId]);\r
                    }\r
                }\r
            }\r
        }\r
        return buttons;\r
    },\r
\r
    /**\r
     * Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All\r
     * display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, although those calls\r
     * are basic shortcuts and do not support all of the config options allowed here.\r
     *\r
     * Example usage:\r
     *\r
     *     Ext.Msg.show({\r
     *         title: 'Address',\r
     *         message: 'Please enter your address:',\r
     *         width: 300,\r
     *         buttons: Ext.Msg.OKCANCEL,\r
     *         multiline: true,\r
     *         fn: saveAddress,\r
     *         animateTarget: 'addAddressBtn',\r
     *         icon: Ext.window.MessageBox.INFO\r
     *     });\r
     *\r
     * @param {Object} config The following config options are supported:\r
     *\r
     * @param {String/Ext.dom.Element} config.animateTarget\r
     * An id or Element from which the message box should animate as it opens and closes.\r
     *\r
     * @param {Number} [config.buttons=false]\r
     * A bitwise button specifier consisting of the sum of any of the following constants:\r
     *\r
     *  - Ext.MessageBox.OK\r
     *  - Ext.MessageBox.YES\r
     *  - Ext.MessageBox.NO\r
     *  - Ext.MessageBox.CANCEL\r
     *\r
     * Some common combinations have already been predefined:\r
     *\r
     *  - Ext.MessageBox.OKCANCEL\r
     *  - Ext.MessageBox.YESNO\r
     *  - Ext.MessageBox.YESNOCANCEL\r
     *\r
     * Or false to not show any buttons.\r
     *\r
     * This may also be specified as an object hash containing custom button text in the same format as the\r
     * {@link #buttonText} config. Button IDs present as property names will be made visible.\r
     *\r
     * @param {Boolean} config.closable\r
     * False to hide the top-right close button (defaults to true). Note that progress and wait dialogs will ignore this\r
     * property and always hide the close button as they can only be closed programmatically.\r
     *\r
     * @param {String} config.cls\r
     * A custom CSS class to apply to the message box's container element\r
     *\r
     * @param {Number} [config.defaultTextHeight=75]\r
     * The default height in pixels of the message box's multiline textarea if displayed.\r
     *\r
     * @param {Function} config.fn\r
     * A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or\r
     * on the dialog close button, or by pressing the return button to enter input.\r
     *\r
     * Progress and wait dialogs will ignore this option since they do not respond to user actions and can only be\r
     * closed programmatically, so any required function should be called by the same code after it closes the dialog.\r
     * Parameters passed:\r
     *\r
     *  @param {String} config.fn.buttonId The ID of the button pressed, one of:\r
     *\r
     * - ok\r
     * - yes\r
     * - no\r
     * - cancel\r
     *\r
     *  @param {String} config.fn.text Value of the input field if either `prompt` or `multiline` is true\r
     *  @param {Object} config.fn.opt The config object passed to show.\r
     *\r
     * @param {Object} config.buttonText\r
     * An object containing string properties which override the system-supplied button text values just for this\r
     * invocation. The property names are:\r
     *\r
     * - ok\r
     * - yes\r
     * - no\r
     * - cancel\r
     *\r
     * @param {Object} config.scope\r
     * The scope (`this` reference) in which the function will be executed.\r
     *\r
     * @param {String} config.icon\r
     * A CSS class that provides a background image to be used as the body icon for the dialog.\r
     * One can use a predefined icon class:\r
     *\r
     *  - Ext.MessageBox.INFO\r
     *  - Ext.MessageBox.WARNING\r
     *  - Ext.MessageBox.QUESTION\r
     *  - Ext.MessageBox.ERROR\r
     *\r
     * or use just any `'custom-class'`. Defaults to empty string.\r
     *\r
     * @param {String} config.iconCls\r
     * The standard {@link Ext.window.Window#iconCls} to add an optional header icon (defaults to '')\r
     * \r
     * @param {String} config.defaultFocus\r
     * The button to focus when showing the dialog. If not specified, defaults to\r
     * the first visible button.\r
     *\r
     * @param {Number} config.maxWidth\r
     * The maximum width in pixels of the message box (defaults to 600)\r
     *\r
     * @param {Number} config.minWidth\r
     * The minimum width in pixels of the message box (defaults to 100)\r
     *\r
     * @param {Boolean} config.modal\r
     * False to allow user interaction with the page while the message box is displayed (defaults to true)\r
     *\r
     * @param {String} config.message\r
     * A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space\r
     * character '&#160;')\r
     *\r
     * @param {Boolean} config.multiline\r
     * True to prompt the user to enter multi-line text (defaults to false)\r
     *\r
     * @param {Boolean} config.progress\r
     * True to display a progress bar (defaults to false)\r
     *\r
     * @param {String} config.progressText\r
     * The text to display inside the progress bar if progress = true (defaults to '')\r
     *\r
     * @param {Boolean} config.prompt\r
     * True to prompt the user to enter single-line text (defaults to false)\r
     *\r
     * @param {Boolean} config.proxyDrag\r
     * True to display a lightweight proxy while dragging (defaults to false)\r
     *\r
     * @param {String} config.title\r
     * The title text\r
     *\r
     * @param {String} config.value\r
     * The string value to set into the active textbox element if displayed\r
     *\r
     * @param {Object/Boolean} [config.wait=false]\r
     * `true` to display a progress bar, or a configuration for {@link Ext.ProgressBar#wait}.\r
     *\r
     * @param {Object} config.waitConfig\r
     * A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)\r
     *\r
     * @param {Number} config.width\r
     * The width of the dialog in pixels\r
     *\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    show: function(cfg) {\r
        var me = this,\r
            visibleFocusables;\r
\r
        cfg = cfg || {};\r
\r
        // If called during global layout suspension, make the call after layout resumption\r
        if (Ext.Component.layoutSuspendCount) {\r
            Ext.on({\r
                resumelayouts: function() {\r
                    me.show(cfg);\r
                },\r
                single: true\r
            });\r
            return me;\r
        }\r
\r
        me.reconfigure(cfg);\r
        if (cfg.cls) {\r
            me.addCls(cfg.cls);\r
        }\r
\r
        // Do not steal focus from anything that may be focused if the MessageBox has no visible focusable\r
        // items. For example, a "wait" message box should not get focus.\r
        visibleFocusables = me.query('textfield:not([hidden]),textarea:not([hidden]),button:not([hidden])');\r
        me.preventFocusOnActivate = !visibleFocusables.length;\r
\r
        // Set the flag, so that the parent show method performs the show procedure that we need.\r
        // ie: animation from animTarget, onShow processing and focusing.\r
        me.hidden = true;\r
        me.callParent();\r
        return me;\r
    },\r
\r
    onShow: function() {\r
        this.callParent(arguments);\r
        this.center();\r
    },\r
\r
    updateText: function(text) {\r
        this.msg.setHtml(text);\r
    },\r
\r
    /**\r
     * Adds the specified icon to the dialog.  By default, the class 'x-messagebox-icon' is applied for default\r
     * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')\r
     * to clear any existing icon. This method must be called before the MessageBox is shown.\r
     * The following built-in icon classes are supported, but you can also pass in a custom class name:\r
     *\r
     *     Ext.window.MessageBox.INFO\r
     *     Ext.window.MessageBox.WARNING\r
     *     Ext.window.MessageBox.QUESTION\r
     *     Ext.window.MessageBox.ERROR\r
     *\r
     * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon\r
     * @param {Number} [width] The width of the icon. If not specified, the default is used\r
     * @param {Number} [height] The height of the icon. If not specified, the default is used\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    setIcon : function(icon, width, height) {\r
        var me = this,\r
            iconCmp = me.iconComponent,\r
            cls = me.messageIconCls;\r
\r
        if (cls) {\r
            iconCmp.removeCls(cls);\r
        }\r
\r
        if (icon) {\r
            iconCmp.show();\r
            if (width || height) {\r
                iconCmp.setSize(width || iconCmp.getWidth(), height || iconCmp.getHeight());\r
            }\r
            iconCmp.addCls(Ext.baseCSSPrefix + 'dlg-icon');\r
            iconCmp.addCls(me.messageIconCls = icon);\r
        } else {\r
            iconCmp.removeCls(Ext.baseCSSPrefix + 'dlg-icon');\r
            iconCmp.hide();\r
        }\r
        return me;\r
    },\r
\r
    /**\r
     * Updates a progress-style message box's text and progress bar. Only relevant on message boxes\r
     * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},\r
     * or by calling {@link Ext.window.MessageBox#method-show} with progress: true.\r
     *\r
     * @param {Number} [value=0] Any number between 0 and 1 (e.g., .5)\r
     * @param {String} [progressText=''] The progress text to display inside the progress bar.\r
     * @param {String} [message] The message box's body text is replaced with the specified string (defaults to undefined\r
     * so that any existing body text will not get overwritten by default unless a new value is passed in)\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    updateProgress : function(value, progressText, message){\r
        this.progressBar.updateProgress(value, progressText);\r
        if (message){\r
            this.updateText(message);\r
        }\r
        return this;\r
    },\r
\r
    onEsc: function() {\r
        if (this.closable !== false) {\r
            this.callParent(arguments);\r
        }\r
    },\r
\r
    /**\r
     * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).\r
     * If a callback function is passed it will be called after the user clicks either button,\r
     * and the id of the button that was clicked will be passed as the only parameter to the callback\r
     * (could also be the top-right close button, which will always report as "cancel").\r
     *\r
     * @param {String} title The title bar text\r
     * @param {String} message The message box body text\r
     * @param {Function} [fn] The callback function invoked after the message box is closed.\r
     * See {@link #method-show} method for details.\r
     * @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    confirm: function(cfg, message, fn, scope) {\r
        if (Ext.isString(cfg)) {\r
            cfg = {\r
                title: cfg,\r
                icon: this.QUESTION,\r
                message: message,\r
                buttons: this.YESNO,\r
                callback: fn,\r
                scope: scope\r
            };\r
        }\r
        return this.show(cfg);\r
    },\r
\r
    /**\r
     * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).\r
     * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user\r
     * clicks either button, and the id of the button that was clicked (could also be the top-right\r
     * close button, which will always report as "cancel") and the text that was entered will be passed as the two parameters to the callback.\r
     *\r
     * @param {String} title The title bar text\r
     * @param {String} message The message box body text\r
     * @param {Function} [fn] The callback function invoked after the message box is closed.\r
     * See {@link #method-show} method for details.\r
     * @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.\r
     * @param {Boolean/Number} [multiline=false] True to create a multiline textbox using the defaultTextHeight\r
     * property, or the height in pixels to create the textbox/\r
     * @param {String} [value=''] Default value of the text input element\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    prompt : function(title, message, fn, scope, multiline, value){\r
        if (Ext.isString(title)) {\r
            title = {\r
                prompt: true,\r
                title: title,\r
                minWidth: this.minPromptWidth,\r
                message: message,\r
                buttons: this.OKCANCEL,\r
                callback: fn,\r
                scope: scope,\r
                multiline: multiline,\r
                value: value\r
            };\r
        }\r
        return this.show(title);\r
    },\r
\r
    /**\r
     * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user\r
     * interaction while waiting for a long-running process to complete that does not have defined intervals.\r
     * You are responsible for closing the message box when the process is complete.\r
     *\r
     * @param {String} message The message box body text\r
     * @param {String} [title] The title bar text\r
     * @param {Object} [config] A {@link Ext.ProgressBar#wait} config object\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    wait : function(message, title, config){\r
        if (Ext.isString(message)) {\r
            message = {\r
                title : title,\r
                message : message,\r
                closable: false,\r
                wait: true,\r
                modal: true,\r
                minWidth: this.minProgressWidth,\r
                waitConfig: config\r
            };\r
        }\r
        return this.show(message);\r
    },\r
\r
    /**\r
     * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).\r
     * If a callback function is passed it will be called after the user clicks the button, and the\r
     * id of the button that was clicked will be passed as the only parameter to the callback\r
     * (could also be the top-right close button, which will always report as "cancel").\r
     *\r
     * @param {String} title The title bar text\r
     * @param {String} message The message box body text\r
     * @param {Function} [fn] The callback function invoked after the message box is closed.\r
     * See {@link #method-show} method for details.\r
     * @param {Object} [scope=window] The scope (<code>this</code> reference) in which the callback is executed.\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    alert: function(title, message, fn, scope) {\r
        if (Ext.isString(title)) {\r
            title = {\r
                title: title,\r
                message: message,\r
                buttons: this.OK,\r
                fn: fn,\r
                scope : scope,\r
                minWidth: this.minWidth\r
            };\r
        }\r
        return this.show(title);\r
    },\r
\r
    /**\r
     * Displays a message box with a progress bar.\r
     *\r
     * You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}\r
     * and closing the message box when the process is complete.\r
     *\r
     * @param {String} title The title bar text\r
     * @param {String} message The message box body text\r
     * @param {String} [progressText=''] The text to display inside the progress bar\r
     * @return {Ext.window.MessageBox} this\r
     */\r
    progress : function(title, message, progressText){\r
        if (Ext.isString(title)) {\r
            title = {\r
                title: title,\r
                message: message,\r
                progress: true,\r
                progressText: progressText\r
            };\r
        }\r
        return this.show(title);\r
    }\r
}, function(MessageBox) {\r
    /**\r
     * @class Ext.MessageBox\r
     * @alternateClassName Ext.Msg\r
     * @extends Ext.window.MessageBox\r
     * @singleton\r
     * @inheritdoc Ext.window.MessageBox\r
     */\r
    // We want to defer creating Ext.MessageBox and Ext.Msg instances\r
    // until overrides have been applied.\r
    Ext.onInternalReady(function() {\r
        Ext.MessageBox = Ext.Msg = new MessageBox();\r
    });\r
});\r