docs/source/MessageBox.html

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