src/window/MessageBox.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  16  * @class Ext.window.MessageBox
  17  * @extends Ext.window.Window
  18
  19 Utility class for generating different styles of message boxes.  The singleton instance, `Ext.Msg` can also be used.
  20 Note that a MessageBox is asynchronous.  Unlike a regular JavaScript `alert` (which will halt
  21 browser execution), showing a MessageBox will not cause the code to stop.  For this reason, if you have code
  22 that should only run *after* some user feedback from the MessageBox, you must use a callback function
  23 (see the `function` parameter for {@link #show} for more details).
  24
  25 {@img Ext.window.MessageBox/messagebox1.png alert MessageBox}
  26 {@img Ext.window.MessageBox/messagebox2.png prompt MessageBox}
  27 {@img Ext.window.MessageBox/messagebox3.png show MessageBox}
  28 #Example usage:#
  29
  30     // Basic alert:
  31     Ext.Msg.alert('Status', 'Changes saved successfully.');
  32
  33     // Prompt for user data and process the result using a callback:
  34     Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
  35         if (btn == 'ok'){
  36             // process text value and close...
  37         }
  38     });
  39
  40     // Show a dialog using config options:
  41     Ext.Msg.show({
  42          title:'Save Changes?',
  43          msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
  44          buttons: Ext.Msg.YESNOCANCEL,
  45          fn: processResult,
  46          animateTarget: 'elId',
  47          icon: Ext.window.MessageBox.QUESTION
  48     });
  49
  50  * @markdown
  51  * @singleton
  52  */
  53 Ext.define('Ext.window.MessageBox', {
  54     extend: 'Ext.window.Window',
  55
  56     requires: [
  57         'Ext.toolbar.Toolbar',
  58         'Ext.form.field.Text',
  59         'Ext.form.field.TextArea',
  60         'Ext.button.Button',
  61         'Ext.layout.container.Anchor',
  62         'Ext.layout.container.HBox',
  63         'Ext.ProgressBar'
  64     ],
  65
  66     alternateClassName: 'Ext.MessageBox',
  67
  68     alias: 'widget.messagebox',
  69
  70     /**
  71      * Button config that displays a single OK button
  72      * @type Number
  73      */
  74     OK : 1,
  75     /**
  76      * Button config that displays a single Yes button
  77      * @type Number
  78      */
  79     YES : 2,
  80     /**
  81      * Button config that displays a single No button
  82      * @type Number
  83      */
  84     NO : 4,
  85     /**
  86      * Button config that displays a single Cancel button
  87      * @type Number
  88      */
  89     CANCEL : 8,
  90     /**
  91      * Button config that displays OK and Cancel buttons
  92      * @type Number
  93      */
  94     OKCANCEL : 9,
  95     /**
  96      * Button config that displays Yes and No buttons
  97      * @type Number
  98      */
  99     YESNO : 6,
 100     /**
 101      * Button config that displays Yes, No and Cancel buttons
 102      * @type Number
 103      */
 104     YESNOCANCEL : 14,
 105     /**
 106      * The CSS class that provides the INFO icon image
 107      * @type String
 108      */
 109     INFO : 'ext-mb-info',
 110     /**
 111      * The CSS class that provides the WARNING icon image
 112      * @type String
 113      */
 114     WARNING : 'ext-mb-warning',
 115     /**
 116      * The CSS class that provides the QUESTION icon image
 117      * @type String
 118      */
 119     QUESTION : 'ext-mb-question',
 120     /**
 121      * The CSS class that provides the ERROR icon image
 122      * @type String
 123      */
 124     ERROR : 'ext-mb-error',
 125
 126     // hide it by offsets. Windows are hidden on render by default.
 127     hideMode: 'offsets',
 128     closeAction: 'hide',
 129     resizable: false,
 130     title: '&#160;',
 131
 132     width: 600,
 133     height: 500,
 134     minWidth: 250,
 135     maxWidth: 600,
 136     minHeight: 110,
 137     maxHeight: 500,
 138     constrain: true,
 139
 140     cls: Ext.baseCSSPrefix + 'message-box',
 141
 142     layout: {
 143         type: 'anchor'
 144     },
 145
 146     /**
 147      * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
 148      * @type Number
 149      */
 150     defaultTextHeight : 75,
 151     /**
 152      * The minimum width in pixels of the message box if it is a progress-style dialog.  This is useful
 153      * for setting a different minimum width than text-only dialogs may need (defaults to 250).
 154      * @type Number
 155      */
 156     minProgressWidth : 250,
 157     /**
 158      * The minimum width in pixels of the message box if it is a prompt dialog.  This is useful
 159      * for setting a different minimum width than text-only dialogs may need (defaults to 250).
 160      * @type Number
 161      */
 162     minPromptWidth: 250,
 163     /**
 164      * An object containing the default button text strings that can be overriden for localized language support.
 165      * Supported properties are: ok, cancel, yes and no.  Generally you should include a locale-specific
 166      * resource file for handling language support across the framework.
 167      * Customize the default text like so: Ext.window.MessageBox.buttonText.yes = "oui"; //french
 168      * @type Object
 169      */
 170     buttonText: {
 171         ok: 'OK',
 172         yes: 'Yes',
 173         no: 'No',
 174         cancel: 'Cancel'
 175     },
 176
 177     buttonIds: [
 178         'ok', 'yes', 'no', 'cancel'
 179     ],
 180
 181     titleText: {
 182         confirm: 'Confirm',
 183         prompt: 'Prompt',
 184         wait: 'Loading...',
 185         alert: 'Attention'
 186     },
 187
 188     iconHeight: 35,
 189
 190     makeButton: function(btnIdx) {
 191         var btnId = this.buttonIds[btnIdx];
 192         return Ext.create('Ext.button.Button', {
 193             handler: this.btnCallback,
 194             itemId: btnId,
 195             scope: this,
 196             text: this.buttonText[btnId],
 197             minWidth: 75
 198         });
 199     },
 200
 201     btnCallback: function(btn) {
 202         var me = this,
 203             value,
 204             field;
 205
 206         if (me.cfg.prompt || me.cfg.multiline) {
 207             if (me.cfg.multiline) {
 208                 field = me.textArea;
 209             } else {
 210                 field = me.textField;
 211             }
 212             value = field.getValue();
 213             field.reset();
 214         }
 215
 216         // Important not to have focus remain in the hidden Window; Interferes with DnD.
 217         btn.blur();
 218         me.hide();
 219         me.userCallback(btn.itemId, value, me.cfg);
 220     },
 221
 222     hide: function() {
 223         var me = this;
 224         me.dd.endDrag();
 225         me.progressBar.reset();
 226         me.removeCls(me.cfg.cls);
 227         me.callParent();
 228     },
 229
 230     initComponent: function() {
 231         var me = this,
 232             i, button;
 233
 234         me.title = '&#160;';
 235
 236         me.topContainer = Ext.create('Ext.container.Container', {
 237             anchor: '100%',
 238             style: {
 239                 padding: '10px',
 240                 overflow: 'hidden'
 241             },
 242             items: [
 243                 me.iconComponent = Ext.create('Ext.Component', {
 244                     cls: 'ext-mb-icon',
 245                     width: 50,
 246                     height: me.iconHeight,
 247                     style: {
 248                         'float': 'left'
 249                     }
 250                 }),
 251                 me.promptContainer = Ext.create('Ext.container.Container', {
 252                     layout: {
 253                         type: 'anchor'
 254                     },
 255                     items: [
 256                         me.msg = Ext.create('Ext.Component', {
 257                             autoEl: { tag: 'span' },
 258                             cls: 'ext-mb-text'
 259                         }),
 260                         me.textField = Ext.create('Ext.form.field.Text', {
 261                             anchor: '100%',
 262                             enableKeyEvents: true,
 263                             listeners: {
 264                                 keydown: me.onPromptKey,
 265                                 scope: me
 266                             }
 267                         }),
 268                         me.textArea = Ext.create('Ext.form.field.TextArea', {
 269                             anchor: '100%',
 270                             height: 75
 271                         })
 272                     ]
 273                 })
 274             ]
 275         });
 276         me.progressBar = Ext.create('Ext.ProgressBar', {
 277             anchor: '-10',
 278             style: 'margin-left:10px'
 279         });
 280
 281         me.items = [me.topContainer, me.progressBar];
 282
 283         // Create the buttons based upon passed bitwise config
 284         me.msgButtons = [];
 285         for (i = 0; i < 4; i++) {
 286             button = me.makeButton(i);
 287             me.msgButtons[button.itemId] = button;
 288             me.msgButtons.push(button);
 289         }
 290         me.bottomTb = Ext.create('Ext.toolbar.Toolbar', {
 291             ui: 'footer',
 292             dock: 'bottom',
 293             layout: {
 294                 pack: 'center'
 295             },
 296             items: [
 297                 me.msgButtons[0],
 298                 me.msgButtons[1],
 299                 me.msgButtons[2],
 300                 me.msgButtons[3]
 301             ]
 302         });
 303         me.dockedItems = [me.bottomTb];
 304
 305         me.callParent();
 306     },
 307
 308     onPromptKey: function(textField, e) {
 309         var me = this,
 310             blur;
 311
 312         if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) {
 313             if (me.msgButtons.ok.isVisible()) {
 314                 blur = true;
 315                 me.msgButtons.ok.handler.call(me, me.msgButtons.ok);
 316             } else if (me.msgButtons.yes.isVisible()) {
 317                 me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
 318                 blur = true;
 319             }
 320
 321             if (blur) {
 322                 me.textField.blur();
 323             }
 324         }
 325     },
 326
 327     reconfigure: function(cfg) {
 328         var me = this,
 329             buttons = cfg.buttons || 0,
 330             hideToolbar = true,
 331             initialWidth = me.maxWidth,
 332             i;
 333
 334         cfg = cfg || {};
 335         me.cfg = cfg;
 336         if (cfg.width) {
 337             initialWidth = cfg.width;
 338         }
 339
 340         // Default to allowing the Window to take focus.
 341         delete me.defaultFocus;
 342
 343         // clear any old animateTarget
 344         me.animateTarget = cfg.animateTarget || undefined;
 345
 346         // Defaults to modal
 347         me.modal = cfg.modal !== false;
 348
 349         // Show the title
 350         if (cfg.title) {
 351             me.setTitle(cfg.title||'&#160;');
 352         }
 353
 354         if (!me.rendered) {
 355             me.width = initialWidth;
 356             me.render(Ext.getBody());
 357         } else {
 358             me.hidden = false;
 359             me.setSize(initialWidth, me.maxHeight);
 360         }
 361         me.setPosition(-10000, -10000);
 362
 363         // Hide or show the close tool
 364         me.closable = cfg.closable && !cfg.wait;
 365         if (cfg.closable === false) {
 366             me.tools.close.hide();
 367         } else {
 368             me.tools.close.show();
 369         }
 370
 371         // Hide or show the header
 372         if (!cfg.title && !me.closable) {
 373             me.header.hide();
 374         } else {
 375             me.header.show();
 376         }
 377
 378         // Default to dynamic drag: drag the window, not a ghost
 379         me.liveDrag = !cfg.proxyDrag;
 380
 381         // wrap the user callback
 382         me.userCallback = Ext.Function.bind(cfg.callback ||cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
 383
 384         // Hide or show the icon Component
 385         me.setIcon(cfg.icon);
 386
 387         // Hide or show the message area
 388         if (cfg.msg) {
 389             me.msg.update(cfg.msg);
 390             me.msg.show();
 391         } else {
 392             me.msg.hide();
 393         }
 394
 395         // Hide or show the input field
 396         if (cfg.prompt || cfg.multiline) {
 397             me.multiline = cfg.multiline;
 398             if (cfg.multiline) {
 399                 me.textArea.setValue(cfg.value);
 400                 me.textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
 401                 me.textArea.show();
 402                 me.textField.hide();
 403                 me.defaultFocus = me.textArea;
 404             } else {
 405                 me.textField.setValue(cfg.value);
 406                 me.textArea.hide();
 407                 me.textField.show();
 408                 me.defaultFocus = me.textField;
 409             }
 410         } else {
 411             me.textArea.hide();
 412             me.textField.hide();
 413         }
 414
 415         // Hide or show the progress bar
 416         if (cfg.progress || cfg.wait) {
 417             me.progressBar.show();
 418             me.updateProgress(0, cfg.progressText);
 419             if(cfg.wait === true){
 420                 me.progressBar.wait(cfg.waitConfig);
 421             }
 422         } else {
 423             me.progressBar.hide();
 424         }
 425
 426         // Hide or show buttons depending on flag value sent.
 427         for (i = 0; i < 4; i++) {
 428             if (buttons & Math.pow(2, i)) {
 429
 430                 // Default to focus on the first visible button if focus not already set
 431                 if (!me.defaultFocus) {
 432                     me.defaultFocus = me.msgButtons[i];
 433                 }
 434                 me.msgButtons[i].show();
 435                 hideToolbar = false;
 436             } else {
 437                 me.msgButtons[i].hide();
 438             }
 439         }
 440
 441         // Hide toolbar if no buttons to show
 442         if (hideToolbar) {
 443             me.bottomTb.hide();
 444         } else {
 445             me.bottomTb.show();
 446         }
 447         me.hidden = true;
 448     },
 449
 450     /**
 451      * Displays a new message box, or reinitializes an existing message box, based on the config options
 452      * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
 453      * although those calls are basic shortcuts and do not support all of the config options allowed here.
 454      * @param {Object} config The following config options are supported: <ul>
 455      * <li><b>animateTarget</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it
 456      * opens and closes (defaults to undefined)</div></li>
 457      * <li><b>buttons</b> : Number<div class="sub-desc">A bitwise button specifier consisting of the sum of any of the following constants:<ul>
 458      * <li>Ext.window.MessageBox.OK</li>
 459      * <li>Ext.window.MessageBox.YES</li>
 460      * <li>Ext.window.MessageBox.NO</li>
 461      * <li>Ext.window.MessageBox.CANCEL</li>
 462      * </ul>Or false to not show any buttons (defaults to false)</div></li>
 463      * <li><b>closable</b> : Boolean<div class="sub-desc">False to hide the top-right close button (defaults to true). Note that
 464      * progress and wait dialogs will ignore this property and always hide the close button as they can only
 465      * be closed programmatically.</div></li>
 466      * <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li>
 467      * <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea
 468      * if displayed (defaults to 75)</div></li>
 469      * <li><b>fn</b> : Function<div class="sub-desc">A callback function which is called when the dialog is dismissed either
 470      * by clicking on the configured buttons, or on the dialog close button, or by pressing
 471      * the return button to enter input.
 472      * <p>Progress and wait dialogs will ignore this option since they do not respond to user
 473      * actions and can only be closed programmatically, so any required function should be called
 474      * by the same code after it closes the dialog. Parameters passed:<ul>
 475      * <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul>
 476      * <li><tt>ok</tt></li>
 477      * <li><tt>yes</tt></li>
 478      * <li><tt>no</tt></li>
 479      * <li><tt>cancel</tt></li>
 480      * </ul></div></div></li>
 481      * <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>
 482      * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.window.MessageBox">multiline</a></tt> is true</div></li>
 483      * <li><b>opt</b> : Object<div class="sub-desc">The config object passed to show.</div></li>
 484      * </ul></p></div></li>
 485      * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code>this</code> reference) in which the function will be executed.</div></li>
 486      * <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
 487      * dialog (e.g. Ext.window.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li>
 488      * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.window.Window#iconCls} to
 489      * add an optional header icon (defaults to '')</div></li>
 490      * <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li>
 491      * <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li>
 492      * <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is
 493      * displayed (defaults to true)</div></li>
 494      * <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the
 495      * XHTML-compliant non-breaking space character '&amp;#160;')</div></li>
 496      * <li><a id="show-option-multiline"></a><b>multiline</b> : Boolean<div class="sub-desc">
 497      * True to prompt the user to enter multi-line text (defaults to false)</div></li>
 498      * <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
 499      * <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li>
 500      * <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>
 501      * <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li>
 502      * <li><b>title</b> : String<div class="sub-desc">The title text</div></li>
 503      * <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li>
 504      * <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
 505      * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li>
 506      * <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li>
 507      * </ul>
 508      * Example usage:
 509      * <pre><code>
 510 Ext.Msg.show({
 511 title: 'Address',
 512 msg: 'Please enter your address:',
 513 width: 300,
 514 buttons: Ext.window.MessageBox.OKCANCEL,
 515 multiline: true,
 516 fn: saveAddress,
 517 animateTarget: 'addAddressBtn',
 518 icon: Ext.window.MessageBox.INFO
 519 });
 520 </code></pre>
 521      * @return {Ext.window.MessageBox} this
 522      */
 523     show: function(cfg) {
 524         var me = this;
 525
 526         me.reconfigure(cfg);
 527         me.addCls(cfg.cls);
 528         if (cfg.animateTarget) {
 529             me.doAutoSize(false);
 530             me.callParent();
 531         } else {
 532             me.callParent();
 533             me.doAutoSize(true);
 534         }
 535         return me;
 536     },
 537
 538     afterShow: function(){
 539         if (this.animateTarget) {
 540             this.center();
 541         }
 542         this.callParent(arguments);
 543     },
 544
 545     doAutoSize: function(center) {
 546         var me = this,
 547             icon = me.iconComponent,
 548             iconHeight = me.iconHeight;
 549
 550         if (!Ext.isDefined(me.frameWidth)) {
 551             me.frameWidth = me.el.getWidth() - me.body.getWidth();
 552         }
 553
 554         // reset to the original dimensions
 555         icon.setHeight(iconHeight);
 556
 557         // Allow per-invocation override of minWidth
 558         me.minWidth = me.cfg.minWidth || Ext.getClass(this).prototype.minWidth;
 559
 560         // Set best possible size based upon allowing the text to wrap in the maximized Window, and
 561         // then constraining it to within the max with. Then adding up constituent element heights.
 562         me.topContainer.doLayout();
 563         if (Ext.isIE6 || Ext.isIEQuirks) {
 564             // In IE quirks, the initial full width of the prompt fields will prevent the container element
 565             // from collapsing once sized down, so temporarily force them to a small width. They'll get
 566             // layed out to their final width later when setting the final window size.
 567             me.textField.setCalculatedSize(9);
 568             me.textArea.setCalculatedSize(9);
 569         }
 570         var width = me.cfg.width || me.msg.getWidth() + icon.getWidth() + 25, /* topContainer's layout padding */
 571             height = (me.header.rendered ? me.header.getHeight() : 0) +
 572             Math.max(me.promptContainer.getHeight(), icon.getHeight()) +
 573             me.progressBar.getHeight() +
 574             (me.bottomTb.rendered ? me.bottomTb.getHeight() : 0) + 20 ;/* topContainer's layout padding */
 575
 576         // Update to the size of the content, this way the text won't wrap under the icon.
 577         icon.setHeight(Math.max(iconHeight, me.msg.getHeight()));
 578         me.setSize(width + me.frameWidth, height + me.frameWidth);
 579         if (center) {
 580             me.center();
 581         }
 582         return me;
 583     },
 584
 585     updateText: function(text) {
 586         this.msg.update(text);
 587         return this.doAutoSize(true);
 588     },
 589
 590     /**
 591      * Adds the specified icon to the dialog.  By default, the class 'ext-mb-icon' is applied for default
 592      * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
 593      * to clear any existing icon. This method must be called before the MessageBox is shown.
 594      * The following built-in icon classes are supported, but you can also pass in a custom class name:
 595      * <pre>
 596 Ext.window.MessageBox.INFO
 597 Ext.window.MessageBox.WARNING
 598 Ext.window.MessageBox.QUESTION
 599 Ext.window.MessageBox.ERROR
 600      *</pre>
 601      * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
 602      * @return {Ext.window.MessageBox} this
 603      */
 604     setIcon : function(icon) {
 605         var me = this;
 606         me.iconComponent.removeCls(me.iconCls);
 607         if (icon) {
 608             me.iconComponent.show();
 609             me.iconComponent.addCls(Ext.baseCSSPrefix + 'dlg-icon');
 610             me.iconComponent.addCls(me.iconCls = icon);
 611         } else {
 612             me.iconComponent.removeCls(Ext.baseCSSPrefix + 'dlg-icon');
 613             me.iconComponent.hide();
 614         }
 615         return me;
 616     },
 617
 618     /**
 619      * Updates a progress-style message box's text and progress bar. Only relevant on message boxes
 620      * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait},
 621      * or by calling {@link Ext.window.MessageBox#show} with progress: true.
 622      * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
 623      * @param {String} progressText The progress text to display inside the progress bar (defaults to '')
 624      * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
 625      * so that any existing body text will not get overwritten by default unless a new value is passed in)
 626      * @return {Ext.window.MessageBox} this
 627      */
 628     updateProgress : function(value, progressText, msg){
 629         this.progressBar.updateProgress(value, progressText);
 630         if (msg){
 631             this.updateText(msg);
 632         }
 633         return this;
 634     },
 635
 636     onEsc: function() {
 637         if (this.closable !== false) {
 638             this.callParent(arguments);
 639         }
 640     },
 641
 642     /**
 643      * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
 644      * If a callback function is passed it will be called after the user clicks either button,
 645      * and the id of the button that was clicked will be passed as the only parameter to the callback
 646      * (could also be the top-right close button).
 647      * @param {String} title The title bar text
 648      * @param {String} msg The message box body text
 649      * @param {Function} fn (optional) The callback function invoked after the message box is closed
 650      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser wnidow.
 651      * @return {Ext.window.MessageBox} this
 652      */
 653     confirm: function(cfg, msg, fn, scope) {
 654         if (Ext.isString(cfg)) {
 655             cfg = {
 656                 title: cfg,
 657                 icon: 'ext-mb-question',
 658                 msg: msg,
 659                 buttons: this.YESNO,
 660                 callback: fn,
 661                 scope: scope
 662             };
 663         }
 664         return this.show(cfg);
 665     },
 666
 667     /**
 668      * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
 669      * The prompt can be a single-line or multi-line textbox.  If a callback function is passed it will be called after the user
 670      * clicks either button, and the id of the button that was clicked (could also be the top-right
 671      * close button) and the text that was entered will be passed as the two parameters to the callback.
 672      * @param {String} title The title bar text
 673      * @param {String} msg The message box body text
 674      * @param {Function} fn (optional) The callback function invoked after the message box is closed
 675      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser wnidow.
 676      * @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
 677      * property, or the height in pixels to create the textbox (defaults to false / single-line)
 678      * @param {String} value (optional) Default value of the text input element (defaults to '')
 679      * @return {Ext.window.MessageBox} this
 680      */
 681     prompt : function(cfg, msg, fn, scope, multiline, value){
 682         if (Ext.isString(cfg)) {
 683             cfg = {
 684                 prompt: true,
 685                 title: cfg,
 686                 minWidth: this.minPromptWidth,
 687                 msg: msg,
 688                 buttons: this.OKCANCEL,
 689                 callback: fn,
 690                 scope: scope,
 691                 multiline: multiline,
 692                 value: value
 693             };
 694         }
 695         return this.show(cfg);
 696     },
 697
 698     /**
 699      * Displays a message box with an infinitely auto-updating progress bar.  This can be used to block user
 700      * interaction while waiting for a long-running process to complete that does not have defined intervals.
 701      * You are responsible for closing the message box when the process is complete.
 702      * @param {String} msg The message box body text
 703      * @param {String} title (optional) The title bar text
 704      * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
 705      * @return {Ext.window.MessageBox} this
 706      */
 707     wait : function(cfg, title, config){
 708         if (Ext.isString(cfg)) {
 709             cfg = {
 710                 title : title,
 711                 msg : cfg,
 712                 closable: false,
 713                 wait: true,
 714                 modal: true,
 715                 minWidth: this.minProgressWidth,
 716                 waitConfig: config
 717             };
 718         }
 719         return this.show(cfg);
 720     },
 721
 722     /**
 723      * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
 724      * If a callback function is passed it will be called after the user clicks the button, and the
 725      * id of the button that was clicked will be passed as the only parameter to the callback
 726      * (could also be the top-right close button).
 727      * @param {String} title The title bar text
 728      * @param {String} msg The message box body text
 729      * @param {Function} fn (optional) The callback function invoked after the message box is closed
 730      * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the callback is executed. Defaults to the browser wnidow.
 731      * @return {Ext.window.MessageBox} this
 732      */
 733     alert: function(cfg, msg, fn, scope) {
 734         if (Ext.isString(cfg)) {
 735             cfg = {
 736                 title : cfg,
 737                 msg : msg,
 738                 buttons: this.OK,
 739                 fn: fn,
 740                 scope : scope,
 741                 minWidth: this.minWidth
 742             };
 743         }
 744         return this.show(cfg);
 745     },
 746
 747     /**
 748      * Displays a message box with a progress bar.  This message box has no buttons and is not closeable by
 749      * the user.  You are responsible for updating the progress bar as needed via {@link Ext.window.MessageBox#updateProgress}
 750      * and closing the message box when the process is complete.
 751      * @param {String} title The title bar text
 752      * @param {String} msg The message box body text
 753      * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
 754      * @return {Ext.window.MessageBox} this
 755      */
 756     progress : function(cfg, msg, progressText){
 757         if (Ext.isString(cfg)) {
 758             cfg = {
 759                 title: cfg,
 760                 msg: msg,
 761                 progressText: progressText
 762             };
 763         }
 764         return this.show(cfg);
 765     }
 766 }, function() {
 767     Ext.MessageBox = Ext.Msg = new this();
 768 });