| minPromptWidth : NumberThe minimum width in pixels of the message box if it is a prompt dialog. This is useful
-for setting a different min... The minimum width in pixels of the message box if it is a prompt dialog. This is useful
+ 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 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 | | minPromptWidth : NumberThe minimum width in pixels of the message box if it is a prompt dialog. This is useful
+for setting a different mini... The minimum width in pixels of the message box if it is a prompt 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
+ 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 (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
+ 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 (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()
@@ -50,104 +50,104 @@ and the id of the button that was clicked will be passed as the only parameter t
:
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
+ 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. | 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
+ 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 (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
+ Ext.MessageBoxAdds 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. 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
| 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
+ Ext.MessageBoxDisplays 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.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
+ 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.MessageBoxUpdates the message box body text Updates the message box body text Parameters:text : String(optional) Replaces the message box element's innerHTML with the specified string (defaults to
+ Ext.MessageBox Updates 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.
+ 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. | MessageBox |
Public EventsThis class has no public events.
\ No newline at end of file
|