    /**
     * @class Ext.window.MessageBox
     * @extends Ext.window.Window

    Utility class for generating different styles of message boxes.  The singleton instance, `Ext.Msg` can also be used.
    Note that a MessageBox is asynchronous.  Unlike a regular JavaScript `alert` (which will halt
    browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
    that should only run *after* some user feedback from the MessageBox, you must use a callback function
    (see the `function` parameter for {@link #show} for more details).

    {@img Ext.window.MessageBox/messagebox1.png alert MessageBox}
    {@img Ext.window.MessageBox/messagebox2.png prompt MessageBox}
    {@img Ext.window.MessageBox/messagebox3.png show MessageBox}
    #Example usage:#

        // Basic alert:
        Ext.Msg.alert('Status', 'Changes saved successfully.');

        // Prompt for user data and process the result using a callback:
        Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
            if (btn == 'ok'){
                // process text value and close...
            }
        });

        // Show a dialog using config options:
        Ext.Msg.show({
             title:'Save Changes?',
             msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
             buttons: Ext.Msg.YESNOCANCEL,
             fn: processResult,
             animateTarget: 'elId',
             icon: Ext.window.MessageBox.QUESTION
        });

     * @markdown
     * @singleton
     * @xtype messagebox
     */
    Ext.define('Ext.window.MessageBox', {
        extend: 'Ext.window.Window',

        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'
        ],

        alternateClassName: 'Ext.MessageBox',

        alias: 'widget.messagebox',

        /**
         * Button config that displays a single OK button
         * @type Number
         */
        OK : 1,
        /**
         * Button config that displays a single Yes button
         * @type Number
         */
        YES : 2,
        /**
         * Button config that displays a single No button
         * @type Number
         */
        NO : 4,
        /**
         * Button config that displays a single Cancel button
         * @type Number
         */
        CANCEL : 8,
        /**
         * Button config that displays OK and Cancel buttons
         * @type Number
         */
        OKCANCEL : 9,
        /**
         * Button config that displays Yes and No buttons
         * @type Number
         */
        YESNO : 6,
        /**
         * Button config that displays Yes, No and Cancel buttons
         * @type Number
         */
        YESNOCANCEL : 14,
        /**
         * The CSS class that provides the INFO icon image
         * @type String
         */
        INFO : 'ext-mb-info',
        /**
         * The CSS class that provides the WARNING icon image
         * @type String
         */
        WARNING : 'ext-mb-warning',
        /**
         * The CSS class that provides the QUESTION icon image
         * @type String
         */
        QUESTION : 'ext-mb-question',
        /**
         * The CSS class that provides the ERROR icon image
         * @type String
         */
        ERROR : 'ext-mb-error',

        // hide it by offsets. Windows are hidden on render by default.
        hideMode: 'offsets',
        closeAction: 'hide',
        resizable: false,
        title: '&#160;',

        width: 600,
        height: 500,
        minWidth: 250,
        maxWidth: 600,
        minHeight: 110,
        maxHeight: 500,
        constrain: true,

        cls: Ext.baseCSSPrefix + 'message-box',

        layout: {
            type: 'anchor'
        },

        /**
         * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
         * @type Number
         */
        defaultTextHeight : 75,
        /**
         * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
         * @type Number
         */
        minProgressWidth : 250,
        /**
         * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
         * for setting a different minimum width than text-only dialogs may need (defaults to 250).
         * @type Number
         */
        minPromptWidth: 250,
        /**
         * An object containing the default button text strings that can be overriden for localized language support.
         * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
         * resource file for handling language support across the framework.
         * Customize the default text like so: Ext.window.MessageBox.buttonText.yes = "oui"; //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();
            }

            // 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 = '&#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 < 4; i++) {
                button = me.makeButton(i);
                me.msgButtons[button.itemId] = button;
                me.msgButtons.push(button);
            }
            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]
                ]
            });
            me.dockedItems = [me.bottomTb];

            me.callParent();
        },

        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 (blur) {
                    me.textField.blur();
                }
            }
        },

        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||'&#160;');
            }

            if (!me.rendered) {
                me.width = initialWidth;
                me.render(Ext.getBody());
            } else {
                me.hidden = false;
                me.setSize(initialWidth, me.maxHeight);
            }
            me.setPosition(-10000, -10000);

            // Hide or show the close tool
            me.closable = cfg.closable && !cfg.wait;
            if (cfg.closable === false) {
                me.tools.close.hide();
            } else {
                me.tools.close.show();
            }

            // Hide or show the header
            if (!cfg.title && !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;
                }
            } 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);
                }
            } else {
                me.progressBar.hide();
            }

            // Hide or show buttons depending on flag value sent.
            for (i = 0; i < 4; i++) {
                if (buttons & 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();
                }
            }

            // Hide toolbar if no buttons to show
            if (hideToolbar) {
                me.bottomTb.hide();
            } else {
                me.bottomTb.show();
            }
            me.hidden = true;
        },

        /**
         * Displays a new message box, or reinitializes an existing message box, based on the config options
         * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
         * although those calls are basic shortcuts and do not support all of the config options allowed here.
         * @param {Object} config The following config options are supported: <ul>
         * <li><b>animateTarget</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> : Number<div class="sub-desc">A bitwise button specifier consisting of the sum of any of the following constants:<ul>
         * <li>Ext.window.MessageBox.OK</li>
         * <li>Ext.window.MessageBox.YES</li>
         * <li>Ext.window.MessageBox.NO</li>
         * <li>Ext.window.MessageBox.CANCEL</li>
         * </ul>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.window.MessageBox">prompt</a></tt>
         * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.window.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 (<code>this</code> reference) in which the function will be executed.</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.window.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li>
         * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.window.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>
    Ext.Msg.show({
    title: 'Address',
    msg: 'Please enter your address:',
    width: 300,
    buttons: Ext.window.MessageBox.OKCANCEL,
    multiline: true,
    fn: saveAddress,
    animateTarget: 'addAddressBtn',
    icon: Ext.window.MessageBox.INFO
    });
    </code></pre>
         * @return {Ext.window.MessageBox} this
         */
        show: function(cfg) {
            var me = this;

            me.reconfigure(cfg);
            me.addCls(cfg.cls);
            if (cfg.animateTarget) {
                me.doAutoSize(false);
                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);
        },

        /**
         * 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.window.MessageBox.INFO
    Ext.window.MessageBox.WARNING
    Ext.window.MessageBox.QUESTION
    Ext.window.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.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;
        },

        /**
         * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
         * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},
         * or by calling {@link Ext.window.MessageBox#show} with progress: true.
         * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
         * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
         * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
         * 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);
            }
        },

        /**
         * 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.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);
        },

        /**
         * 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.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);
        },

        /**
         * 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.window.MessageBox} this
         */
        wait : function(cfg, title, config){
            if (Ext.isString(cfg)) {
                cfg = {
                    title : title,
                    msg : cfg,
                    closable: false,
                    wait: true,
                    modal: true,
                    minWidth: this.minProgressWidth,
                    waitConfig: config
                };
            }
            return this.show(cfg);
        },

        /**
         * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
         * If a callback function is passed it will be called after the user clicks the button, and the
         * id of the button that was clicked will be passed as the only parameter to the callback
         * (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.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.show(cfg);
        },

        /**
         * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
         * the user.  You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}
         * and closing the message box when the process is complete.
         * @param {String} title The title bar text
         * @param {String} msg The message box body text
         * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
         * @return {Ext.window.MessageBox} this
         */
        progress : function(cfg, msg, progressText){
            if (Ext.isString(cfg)) {
                cfg = {
                    title: cfg,
                    msg: msg,
                    progressText: progressText
                };
            }
            return this.show(cfg);
        }
    }, function() {
        Ext.MessageBox = Ext.Msg = new this();
    });