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