- *
-
Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
-
Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert
(which will halt
-browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
-that should only run after some user feedback from the MessageBox, you must use a callback function
-(see the function
parameter for show for more details).
-
Example usage:
-
// Basic alert:
-Ext.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data and process the result using a callback:
-Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
- if (btn == 'ok'){
- // process text value and close...
- }
-});
-
-// Show a dialog using config options:
-Ext.Msg.show({
- title:'Save Changes?',
- msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
- buttons: Ext.Msg.YESNOCANCEL,
- fn: processResult,
- animEl: 'elId',
- icon: Ext.MessageBox.QUESTION
-});
This class is a singleton and cannot be created directly.
-
-
-
-
-
- |
-
-
- CANCEL : Object
- Button config that displays a single Cancel button
- |
- MessageBox |
-
-
- |
-
-
- ERROR : String
- The CSS class that provides the ERROR icon image
- |
- MessageBox |
-
-
- |
-
-
- INFO : String
- The CSS class that provides the INFO icon image
- |
- MessageBox |
-
-
- |
-
-
- OK : Object
- Button config that displays a single OK button
- |
- MessageBox |
-
-
- |
-
-
- OKCANCEL : Object
- Button config that displays OK and Cancel buttons
- |
- MessageBox |
-
-
- |
-
-
- QUESTION : String
- The CSS class that provides the QUESTION icon image
- |
- MessageBox |
-
-
- |
-
-
- WARNING : String
- The CSS class that provides the WARNING icon image
- |
- MessageBox |
-
-
- |
-
-
- YESNO : Object
- Button config that displays Yes and No buttons
- |
- MessageBox |
-
-
- |
-
-
- YESNOCANCEL : Object
- Button config that displays Yes, No and Cancel buttons
- |
- MessageBox |
-
-
- |
-
-
- buttonText : Object
- An object containing the default button text strings that can be overriden for localized language support.
-Supported ...
-
- An object containing the default button text strings that can be overriden for localized language support.
-Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific
-resource file for handling language support across the framework.
-Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
-
- |
- MessageBox |
-
-
- |
-
-
- defaultTextHeight : Number
- The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
- |
- MessageBox |
-
-
- |
-
-
- maxWidth : Number
- The maximum width in pixels of the message box (defaults to 600)
- |
- MessageBox |
-
-
- |
-
-
- minProgressWidth : Number
- The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
-for setting a differ...
-
- The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
-for setting a different minimum width than text-only dialogs may need (defaults to 250)
-
- |
- MessageBox |
-
-
- |
-
-
- minWidth : Number
- The minimum width in pixels of the message box (defaults to 100)
- |
- MessageBox |
-
-
-
-
-
-
-
- |
-
-
- alert( String title , String msg , [Function fn ], [Object scope ] ) : Ext.MessageBox
- Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
-If a c...
-
- Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
-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 : StringThe title bar text msg : StringThe 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:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- confirm( String title , String msg , [Function fn ], [Object scope ] ) : Ext.MessageBox
- Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
-If a callback funct...
-
- Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
-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 : StringThe title bar text msg : StringThe 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:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- getDialog() : Ext.Window
- Returns a reference to the underlying Ext.Window element
-
- Returns a reference to the underlying Ext.Window element
- Parameters:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- hide() : Ext.MessageBox
- Hides the message box if it is displayed
-
- Hides the message box if it is displayed
- Parameters:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- isVisible() : Boolean
- Returns true if the message box is currently displayed
-
- Returns true if the message box is currently displayed
- Parameters:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- progress( String title , String msg , [String progressText ] ) : Ext.MessageBox
- Displays a message box with a progress bar. This message box has no buttons and is not closeable by
-the user. You a...
-
- 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:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- prompt( String title , String msg , [Function fn ], [Object scope ], [Boolean/Number multiline ], [String value ] ) : Ext.MessageBox
- Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's p...
-
- Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
-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 : StringThe title bar text msg : StringThe 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) value : String(optional) Default value of the text input element (defaults to '')
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- setIcon( String icon ) : Ext.MessageBox
- Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
-styling, and the c...
-
- Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
-styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
-to clear any existing icon. The following built-in icon classes are supported, but you can also pass
-in a custom class name:
- Ext.MessageBox.INFO
+Package: | Ext | Defined In: | MessageBox.js | Class: | MessageBox | Extends: | Object |
Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
+ Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt
+browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
+that should only run after some user feedback from the MessageBox, you must use a callback function
+(see the function parameter for show for more details).
+ Example usage:
+ // Basic alert:
+Ext.Msg.alert('Status', 'Changes saved successfully.');
+
+// Prompt for user data and process the result using a callback:
+Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
+ if (btn == 'ok'){
+ // process text value and close...
+ }
+});
+
+// Show a dialog using config options:
+Ext.Msg.show({
+ title:'Save Changes?',
+ msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
+ buttons: Ext.Msg.YESNOCANCEL,
+ fn: processResult,
+ animEl: 'elId',
+ icon: Ext.MessageBox.QUESTION
+}); This class is a singleton and cannot be created directly.Public Properties|
| CANCEL : Object Button config that displays a single Cancel button | MessageBox | | ERROR : String The CSS class that provides the ERROR icon image | MessageBox | | INFO : String The CSS class that provides the INFO icon image | MessageBox | | Msg : Object | MessageBox | | OK : Object Button config that displays a single OK button | MessageBox | | OKCANCEL : Object Button config that displays OK and Cancel buttons | MessageBox | | QUESTION : String The CSS class that provides the QUESTION icon image | MessageBox | | WARNING : String The CSS class that provides the WARNING icon image | MessageBox | | YESNO : Object Button config that displays Yes and No buttons | MessageBox | | YESNOCANCEL : Object Button config that displays Yes, No and Cancel buttons | MessageBox | | buttonText : ObjectAn object containing the default button text strings that can be overriden for localized language support.
+Supported... An object containing the default button text strings that can be overriden for localized language support.
+Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific
+resource file for handling language support across the framework.
+Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french | MessageBox | | defaultTextHeight : Number The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) | MessageBox | | maxWidth : Number The maximum width in pixels of the message box (defaults to 600) | MessageBox | | minProgressWidth : NumberThe minimum width in pixels of the message box if it is a progress-style dialog. This is useful
+for setting a diffe... The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
+for setting a different minimum width than text-only dialogs may need (defaults to 250) | MessageBox | | minWidth : Number The minimum width in pixels of the message box (defaults to 100) | MessageBox |
Public Methods|
| alert( String title , String msg , [Function fn ], [Object scope ] )
+ :
+ Ext.MessageBoxDisplays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
+If a ... Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
+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 : StringThe title bar text msg : StringThe message box body text fn : Function(optional) The callback function invoked after the message box is closed scope : Object(optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow. Returns: | MessageBox | | confirm( String title , String msg , [Function fn ], [Object scope ] )
+ :
+ Ext.MessageBoxDisplays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
+If a callback func... Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
+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 : StringThe title bar text msg : StringThe message box body text fn : Function(optional) The callback function invoked after the message box is closed scope : Object(optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow. Returns: | MessageBox | | getDialog()
+ :
+ Ext.WindowReturns a reference to the underlying Ext.Window element Returns a reference to the underlying Ext.Window element | MessageBox | | hide()
+ :
+ Ext.MessageBoxHides the message box if it is displayed Hides the message box if it is displayed | MessageBox | | isVisible()
+ :
+ BooleanReturns true if the message box is currently displayed Returns true if the message box is currently displayed | MessageBox | | progress( String title , String msg , [String progressText ] )
+ :
+ Ext.MessageBoxDisplays a message box with a progress bar. This message box has no buttons and is not closeable by
+the user. You ... 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. | MessageBox | | prompt( String title , String msg , [Function fn ], [Object scope ], [Boolean/Number multiline ], [String value ] )
+ :
+ Ext.MessageBoxDisplays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's p... Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
+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 : StringThe title bar text msg : StringThe message box body text fn : Function(optional) The callback function invoked after the message box is closed scope : Object(optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow. 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) value : String(optional) Default value of the text input element (defaults to '') Returns: | MessageBox | | setIcon( String icon )
+ :
+ Ext.MessageBoxAdds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
+styling, and the ... Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
+styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
+to clear any existing icon. This method must be called before the MessageBox is shown.
+The following built-in icon classes are supported, but you can also pass in a custom class name:
+
+Ext.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
-Ext.MessageBox.ERROR
- Parameters:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- show( Object config ) : Ext.MessageBox
- Displays a new message box, or reinitializes an existing message box, based on the config options
-passed in. All disp...
-
- Displays a new message box, or reinitializes an existing message box, based on the config options
-passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
-although those calls are basic shortcuts and do not support all of the config options allowed here.
- Parameters:
- config : ObjectThe following config options are supported:
-- animEl : String/Element
An id or Element from which the message box should animate as it
-opens and closes (defaults to undefined)
-- 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)
-- closable : Boolean
False to hide the top-right close button (defaults to true). Note that
-progress and wait dialogs will ignore this property and always hide the close button as they can only
-be closed programmatically.
-- cls : String
A custom CSS class to apply to the message box's container element
-- defaultTextHeight : Number
The default height in pixels of the message box's multiline textarea
-if displayed (defaults to 75)
-- fn : Function
A callback function which is called when the dialog is dismissed either
-by clicking on the configured buttons, or on the dialog close button, or by pressing
-the return button to enter input.
- Progress and wait dialogs will ignore this option since they do not respond to user
-actions and can only be closed programmatically, so any required function should be called
-by the same code after it closes the dialog. Parameters passed:
-- scope : Object
The scope of the callback function
-- icon : String
A CSS class that provides a background image to be used as the body icon for the
-dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')
-- iconCls : String
-- maxWidth : Number
The maximum width in pixels of the message box (defaults to 600)
-- minWidth : Number
The minimum width in pixels of the message box (defaults to 100)
-- modal : Boolean
False to allow user interaction with the page while the message box is
-displayed (defaults to true)
-- msg : String
A string that will replace the existing message box body text (defaults to the
-XHTML-compliant non-breaking space character ' ')
-- 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)
-- progressText : String
The text to display inside the progress bar if progress = true (defaults to '')
-- prompt : Boolean
True to prompt the user to enter single-line text (defaults to false)
-- proxyDrag : Boolean
True to display a lightweight proxy while dragging (defaults to false)
-- title : String
The title text
-- value : String
The string value to set into the active textbox element if displayed
-- wait : Boolean
True to display a progress bar (defaults to false)
-- waitConfig : Object
-- width : Number
The width of the dialog in pixels
-
-Example usage:
- Ext.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Ext.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn',
- icon: Ext.MessageBox.INFO
-});
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- updateProgress( Number value , String progressText , String msg ) : Ext.MessageBox
- Updates a progress-style message box's text and progress bar. Only relevant on message boxes
-initiated via Ext.Messag...
-
- Updates a progress-style message box's text and progress bar. Only relevant on message boxes
-initiated via Ext.MessageBox.progress or Ext.MessageBox.wait,
-or by calling Ext.MessageBox.show with progress: true.
- Parameters:
- value : NumberAny number between 0 and 1 (e.g., .5, defaults to 0) progressText : StringThe progress text to display inside the progress bar (defaults to '') msg : StringThe message box's body text is replaced with the specified string (defaults to undefined
-so that any existing body text will not get overwritten by default unless a new value is passed in)
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- updateText( [String text ] ) : Ext.MessageBox
- Updates the message box body text
-
- Updates the message box body text
- Parameters:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
- |
-
-
- wait( String msg , [String title ], [Object config ] ) : Ext.MessageBox
- Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
-interaction whi...
-
- 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:
-
- Returns:
-
-
-
-
- |
- MessageBox |
-
-
-
- Public Events
- This class has no public events.
-
\ No newline at end of file
+Ext.MessageBox.ERROR
+ | MessageBox |
| show( Object config )
+ :
+ Ext.MessageBoxDisplays a new message box, or reinitializes an existing message box, based on the config options
+passed in. All dis... Displays a new message box, or reinitializes an existing message box, based on the config options
+passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
+although those calls are basic shortcuts and do not support all of the config options allowed here. Parameters:config : ObjectThe following config options are supported:
+- animEl : String/Element
An id or Element from which the message box should animate as it
+opens and closes (defaults to undefined)
+- 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)
+- closable : Boolean
False to hide the top-right close button (defaults to true). Note that
+progress and wait dialogs will ignore this property and always hide the close button as they can only
+be closed programmatically.
+- cls : String
A custom CSS class to apply to the message box's container element
+- defaultTextHeight : Number
The default height in pixels of the message box's multiline textarea
+if displayed (defaults to 75)
+- fn : Function
A callback function which is called when the dialog is dismissed either
+by clicking on the configured buttons, or on the dialog close button, or by pressing
+the return button to enter input.
+ Progress and wait dialogs will ignore this option since they do not respond to user
+actions and can only be closed programmatically, so any required function should be called
+by the same code after it closes the dialog. Parameters passed:
+- scope : Object
The scope of the callback function
+- icon : String
A CSS class that provides a background image to be used as the body icon for the
+dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')
+- iconCls : String
+- maxWidth : Number
The maximum width in pixels of the message box (defaults to 600)
+- minWidth : Number
The minimum width in pixels of the message box (defaults to 100)
+- modal : Boolean
False to allow user interaction with the page while the message box is
+displayed (defaults to true)
+- msg : String
A string that will replace the existing message box body text (defaults to the
+XHTML-compliant non-breaking space character ' ')
+- 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)
+- progressText : String
The text to display inside the progress bar if progress = true (defaults to '')
+- prompt : Boolean
True to prompt the user to enter single-line text (defaults to false)
+- proxyDrag : Boolean
True to display a lightweight proxy while dragging (defaults to false)
+- title : String
The title text
+- value : String
The string value to set into the active textbox element if displayed
+- wait : Boolean
True to display a progress bar (defaults to false)
+- waitConfig : Object
+- width : Number
The width of the dialog in pixels
+
+Example usage:
+ Ext.Msg.show({
+ title: 'Address',
+ msg: 'Please enter your address:',
+ width: 300,
+ buttons: Ext.MessageBox.OKCANCEL,
+ multiline: true,
+ fn: saveAddress,
+ animEl: 'addAddressBtn',
+ icon: Ext.MessageBox.INFO
+});
Returns: | MessageBox |
| updateProgress( Number value , String progressText , String msg )
+ :
+ Ext.MessageBoxUpdates a progress-style message box's text and progress bar. Only relevant on message boxes
+initiated via Ext.Messa... Updates a progress-style message box's text and progress bar. Only relevant on message boxes
+initiated via Ext.MessageBox.progress or Ext.MessageBox.wait,
+or by calling Ext.MessageBox.show with progress: true. Parameters:value : NumberAny number between 0 and 1 (e.g., .5, defaults to 0) progressText : StringThe progress text to display inside the progress bar (defaults to '') msg : StringThe message box's body text is replaced with the specified string (defaults to undefined
+so that any existing body text will not get overwritten by default unless a new value is passed in) Returns: | MessageBox |
| updateText( [String text ] )
+ :
+ Ext.MessageBoxUpdates the message box body text Updates the message box body text | MessageBox |
| wait( String msg , [String title ], [Object config ] )
+ :
+ Ext.MessageBoxDisplays a message box with an infinitely auto-updating progress bar. This can be used to block user
+interaction wh... 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. | MessageBox |
This class has no public events.