From Learn About the Ext JavaScript Library

Ext Manual > Widgets > Dialogs >

Ext.MessageBox

From the API docs, Ext.MessageBox is a: Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.

Example code:

// Basic alert:
Ext.Msg.alert('Status', 'Changes saved successfully.');
 
// Prompt for user data:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // process text value...
    }
});
 
// Show a dialog using config options:
Ext.Msg.show({
   title:'Save Changes?',
   msg: 'You are closing a tab that has unsaved changes',
   buttons: Ext.Msg.YESNOCANCEL,
   fn: processResult,
   animEl: 'elId'
});

One MessageBox to rule them all

The first time you read the API docs you might be surprised to see that MessageBox has no public constructor. Ext's MessageBox is a modal dialog box built on top of an Ext.BasicDialog element. The important thing to realise here is that due to message boxes being modal, only one MessageBox object is ever going to be displayed on the screen at the same time so you really only need one MessageBox object for your entire webapp. Can you guess now why Ext.MessageBox doesn't have a public constructor?

Ext.MessageBox is a singleton, with an underlying Ext.BasicDialog element that it creates lazily the first time it is required. What this means is that any time you need to display a message box to your user, you pick from a list of functions that display canned MessageBox configurations

• Ext.MessageBox.progress() - message box with a progress bar
• Ext.MessageBox.alert() - standard read-only message box with an OK button
• Ext.MessageBox.wait() - message box with an infinitely auto-updating progress bar
• Ext.MessageBox.confirm() - confirmation message box with Yes and No buttons
• Ext.MessageBox.prompt () - message box with OK and Cancel buttons prompting the user to enter some text

Or use the generic Ext.MessageBox.show() which leaves configuration entirely up to you.

You can call Ext.MessageBox.getDialog() on the MessageBox object to get the underlying Ext.BasicDialog element. This is very handy if you want to attach event handlers to the dialog box, such as an action to perform after the dialog is closed. You should remember, however, that the same Ext.BasicDialog is being reused over an over here, so any events you attached will be fired for all future message boxes. One way to deal with this is to mark your event as single so that it is removed after the first time it fires (a helpful feature of Ext.EventManager).

For example, say you want to redirect users after they close an alert window.

Ext.Msg.getDialog().on('beforehide', function() {
  document.location = "http://myurl"
 }, this, {
  single:true
 });
Ext.Msg.alert('My Title', 'Click OK to be redirected');

Links

• MessageBox documentation
• Example code:
  • MessageBox and Progress Example