Print Friendly

# Class Ext.MessageBox

Package: | Ext
Class: | MessageBox
Extends: | Object
Defined In: | MessageBox.js

Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used. Example usage:

    // 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: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
       buttons: Ext.Msg.YESNOCANCEL,
       fn: processResult,
       animEl: 'elId'
    });

This class is a singleton and cannot be created directly.
Properties - Methods - Events

## Public Properties

Property | Defined By
--- | ---
| OK : Object | MessageBox
Button config that displays a single OK button
| OKCANCEL : Object | MessageBox
Button config that displays OK and Cancel buttons
| YESNO : Object | MessageBox
Button config that displays Yes and No buttons
| YESNOCANCEL : Object | MessageBox
Button config that displays Yes, No and Cancel buttons
| buttonText : Object | MessageBox
An object containing the default button text strings that can be overriden for localized language support. Supported ...
| defaultTextHeight : Number | MessageBox
The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
| maxWidth : Number | MessageBox
The maximum width in pixels of the message box (defaults to 600)
| minProgressWidth : Number | MessageBox
The minimum width in pixels of the message box progress bar if displayed (defaults to 250)
| minWidth : Number | MessageBox
The minimum width in pixels of the message box (defaults to 100)

## Public Methods

Method | Defined By
--- | ---
| alert(`String title`, `String msg`, [`Function fn`], [`Object scope`]) : Ext.MessageBox | MessageBox
Displays a standard read-only message box (comparable to the basic JavaScript alert prompt) with an OK button. If a c...
| confirm(`String title`, `String msg`, [`Function fn`], [`Object scope`]) : Ext.MessageBox | MessageBox
Displays a confirmation message box with Yes and No buttons. If a callback function is passed it will be called afte...
| getDialog() : Ext.BasicDialog | MessageBox
Returns a reference to the underlying Ext.BasicDialog element
| hide() : void | MessageBox
Hides the message box if it is displayed
| isVisible() : Boolean | MessageBox
Returns true if the message box is currently displayed
| progress(`String title`, `String msg`) : Ext.MessageBox | MessageBox
Displays a message box with a progress bar. This message box has no buttons and is not closeable by the user. You a...
| prompt(`String title`, `String msg`, [`Function fn`], [`Object scope`], [`Boolean/Number multiline`]) : Ext.MessageBox | MessageBox
Displays a message box with OK and Cancel buttons prompting the user to enter some text. The prompt can be a single-...
| show(`Object config`) : Ext.MessageBox | MessageBox
Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All func...
| updateProgress(`Number value`, `String text`) : Ext.MessageBox | MessageBox
Updates a progress-style message box's text and progress bar. Only relevant on message boxes initiated via Ext.Messa...
| updateText(`String text`) : Ext.MessageBox | MessageBox
Updates the message box body text
| wait(`String msg`, [`String title`]) : Ext.MessageBox | MessageBox
Displays a message box with an infinitely auto-updating progress bar. This can be used to block user interaction whi...

## Public Events

This class has no public events.

## Property Details

### OK

`public Object OK`
Button config that displays a single OK button
This property is defined by MessageBox.

### OKCANCEL

`public Object OKCANCEL`
Button config that displays OK and Cancel buttons
This property is defined by MessageBox.

### YESNO

`public Object YESNO`
Button config that displays Yes and No buttons
This property is defined by MessageBox.

### YESNOCANCEL

`public Object YESNOCANCEL`
Button config that displays Yes, No and Cancel buttons
This property is defined by MessageBox.

### buttonText

`public Object buttonText`
An object containing the default button text strings that can be overriden for localized language support. Supported properties are: ok, cancel, yes and no. Customize the default text like so: Ext.MessageBox.buttonText.yes = "Si";
This property is defined by MessageBox.

### defaultTextHeight

`public Number defaultTextHeight`
The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
This property is defined by MessageBox.

### maxWidth

`public Number maxWidth`
The maximum width in pixels of the message box (defaults to 600)
This property is defined by MessageBox.

### minProgressWidth

`public Number minProgressWidth`
The minimum width in pixels of the message box progress bar if displayed (defaults to 250)
This property is defined by MessageBox.

### minWidth

`public Number minWidth`
The minimum width in pixels of the message box (defaults to 100)
This property is defined by MessageBox.

## Method Details

### alert

`public function alert(`String title`, `String msg`, [`Function fn`], [`Object scope`])`
Displays a standard read-only message box (comparable to the basic JavaScript alert prompt) with an OK button. If a callback function is passed it will be called after the user clicks the button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
Parameters:

- `title` : String
  The title bar text
- `msg` : String
  The message box body text
- `fn` : Function
  (optional) The callback function invoked after the message box is closed
- `scope` : Object
  (optional) The scope of the callback function

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### confirm

`public function confirm(`String title`, `String msg`, [`Function fn`], [`Object scope`])`
Displays a confirmation message box with Yes and No buttons. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked will be passed as the only parameter to the callback (could also be the top-right close button).
Parameters:

- `title` : String
  The title bar text
- `msg` : String
  The message box body text
- `fn` : Function
  (optional) The callback function invoked after the message box is closed
- `scope` : Object
  (optional) The scope of the callback function

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### getDialog

`public function getDialog()`
Returns a reference to the underlying Ext.BasicDialog element
Parameters:

- None.

Returns:

- `Ext.BasicDialog`
  dialog The BasicDialog element

This method is defined by MessageBox.

### hide

`public function hide()`
Hides the message box if it is displayed
Parameters:

- None.

Returns:

- `void`

This method is defined by MessageBox.

### isVisible

`public function isVisible()`
Returns true if the message box is currently displayed
Parameters:

- None.

Returns:

- `Boolean`
  isVisible True if the message box is visible, else false

This method is defined by MessageBox.

### progress

`public function progress(`String title`, `String msg`)`
Displays a message box with a progress bar. This message box has no buttons and is not closeable by the user. You are responsible for updating the progress bar as needed via Ext.MessageBox.updateProgress and closing the message box when the process is complete.
Parameters:

- `title` : String
  The title bar text
- `msg` : String
  The message box body text

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### prompt

`public function prompt(`String title`, `String msg`, [`Function fn`], [`Object scope`], [`Boolean/Number multiline`])`
Displays a message box with OK and Cancel buttons prompting the user to enter some text. The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user clicks either button, and the id of the button that was clicked (could also be the top-right close button) and the text that was entered will be passed as the two parameters to the callback.
Parameters:

- `title` : String
  The title bar text
- `msg` : String
  The message box body text
- `fn` : Function
  (optional) The callback function invoked after the message box is closed
- `scope` : Object
  (optional) The scope of the callback function
- `multiline` : Boolean/Number
  (optional) True to create a multiline textbox using the defaultTextHeight property, or the height in pixels to create the textbox (defaults to false / single-line)

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### show

`public function show(`Object config`)`
Displays a new message box, or reinitializes an existing message box, based on the config options passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally. The following config object properties are supported:

    Property    Type             Description
    ----------  ---------------  ----------------------------------------------------------------------
    title       String           The title text
    closable    Boolean          False to hide the top-right close box (defaults to true)
    prompt      Boolean          True to prompt the user to enter single-line text (defaults to false)
    multiline   Boolean          True to prompt the user to enter multi-line text (defaults to false)
    progress    Boolean          True to display a progress bar (defaults to false)
    value       String           The string value to set into the active textbox element if displayed
    buttons     Object/Boolean   A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
                                 cancel:'Bar'}), or false to not show any buttons (defaults to false)
    msg         String           A string that will replace the existing message box body text (defaults
                                 to the XHTML-compliant non-breaking space character  )
    cls         String           A custom CSS class to apply to the message box element
    proxyDrag   Boolean          True to display a lightweight proxy while dragging (defaults to false)
    modal       Boolean          False to allow user interaction with the page while the message box is
                                 displayed (defaults to true)

Example usage:

    Ext.Msg.show({
       title: 'Address',
       msg: 'Please enter your address:',
       width: 300,
       buttons: Ext.MessageBox.OKCANCEL,
       multiline: true,
       fn: saveAddress,
       animEl: 'addAddressBtn'
    });

Parameters:

- `config` : Object
  Configuration options

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### updateProgress

`public function updateProgress(`Number value`, `String text`)`
Updates a progress-style message box's text and progress bar. Only relevant on message boxes initiated via Ext.MessageBox.progress or by calling Ext.MessageBox.show with progress: true.
Parameters:

- `value` : Number
  Any number between 0 and 1 (e.g., .5)
- `text` : String
  If defined, the message box's body text is replaced with the specified string (defaults to undefined)

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### updateText

`public function updateText(`String text`)`
Updates the message box body text
Parameters:

- `text` : String
  Replaces the message box element's innerHTML with the specified string (defaults to the XHTML-compliant non-breaking space character )

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

### wait

`public function wait(`String msg`, [`String title`])`
Displays a message box with an infinitely auto-updating progress bar. This can be used to block user interaction while waiting for a long-running process to complete that does not have defined intervals. You are responsible for closing the message box when the process is complete.
Parameters:

- `msg` : String
  The message box body text
- `title` : String
  (optional) The title bar text

Returns:

- `Ext.MessageBox`
  messageBox This message box

This method is defined by MessageBox.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.