docs/source/MessageBox.html

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