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 {@link #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
});
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:
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.MessageBox.INFO
Ext.MessageBox.WARNING
Ext.MessageBox.QUESTION
Ext.MessageBox.ERROR
*
* @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
* @return {Ext.MessageBox} this
*/
setIcon : function(icon){
if(!dlg){
bufferIcon = icon;
return;
}
bufferIcon = undefined;
if(icon && icon != ''){
iconEl.removeClass('x-hidden');
iconEl.replaceClass(iconCls, icon);
bodyEl.addClass('x-dlg-icon');
iconCls = icon;
}else{
iconEl.replaceClass(iconCls, 'x-hidden');
bodyEl.removeClass('x-dlg-icon');
iconCls = '';
}
return this;
},
/**
* 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 {@link Ext.MessageBox#updateProgress}
* and closing the message box when the process is complete.
* @param {String} title The title bar text
* @param {String} msg The message box body text
* @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
* @return {Ext.MessageBox} this
*/
progress : function(title, msg, progressText){
this.show({
title : title,
msg : msg,
buttons: false,
progress:true,
closable:false,
minWidth: this.minProgressWidth,
progressText: progressText
});
return this;
},
/**
* 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.
* @param {String} msg The message box body text
* @param {String} title (optional) The title bar text
* @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
* @return {Ext.MessageBox} this
*/
wait : function(msg, title, config){
this.show({
title : title,
msg : msg,
buttons: false,
closable:false,
wait:true,
modal:true,
minWidth: this.minProgressWidth,
waitConfig: config
});
return this;
},
/**
* 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).
* @param {String} title The title bar text
* @param {String} msg The message box body text
* @param {Function} fn (optional) The callback function invoked after the message box is closed
* @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
* @return {Ext.MessageBox} this
*/
alert : function(title, msg, fn, scope){
this.show({
title : title,
msg : msg,
buttons: this.OK,
fn: fn,
scope : scope,
minWidth: this.minWidth
});
return this;
},
/**
* 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).
* @param {String} title The title bar text
* @param {String} msg The message box body text
* @param {Function} fn (optional) The callback function invoked after the message box is closed
* @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
* @return {Ext.MessageBox} this
*/
confirm : function(title, msg, fn, scope){
this.show({
title : title,
msg : msg,
buttons: this.YESNO,
fn: fn,
scope : scope,
icon: this.QUESTION,
minWidth: this.minWidth
});
return this;
},
/**
* 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.
* @param {String} title The title bar text
* @param {String} msg The message box body text
* @param {Function} fn (optional) The callback function invoked after the message box is closed
* @param {Object} scope (optional) The scope (this reference) in which the callback is executed. Defaults to the browser wnidow.
* @param {Boolean/Number} multiline (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)
* @param {String} value (optional) Default value of the text input element (defaults to '')
* @return {Ext.MessageBox} this
*/
prompt : function(title, msg, fn, scope, multiline, value){
this.show({
title : title,
msg : msg,
buttons: this.OKCANCEL,
fn: fn,
minWidth: this.minPromptWidth,
scope : scope,
prompt:true,
multiline: multiline,
value: value
});
return this;
},
/**
* Button config that displays a single OK button
* @type Object
*/
OK : {ok:true},
/**
* Button config that displays a single Cancel button
* @type Object
*/
CANCEL : {cancel:true},
/**
* Button config that displays OK and Cancel buttons
* @type Object
*/
OKCANCEL : {ok:true, cancel:true},
/**
* Button config that displays Yes and No buttons
* @type Object
*/
YESNO : {yes:true, no:true},
/**
* Button config that displays Yes, No and Cancel buttons
* @type Object
*/
YESNOCANCEL : {yes:true, no:true, cancel:true},
/**
* The CSS class that provides the INFO icon image
* @type String
*/
INFO : 'ext-mb-info',
/**
* The CSS class that provides the WARNING icon image
* @type String
*/
WARNING : 'ext-mb-warning',
/**
* The CSS class that provides the QUESTION icon image
* @type String
*/
QUESTION : 'ext-mb-question',
/**
* The CSS class that provides the ERROR icon image
* @type String
*/
ERROR : 'ext-mb-error',
/**
* The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
* @type Number
*/
defaultTextHeight : 75,
/**
* The maximum width in pixels of the message box (defaults to 600)
* @type Number
*/
maxWidth : 600,
/**
* The minimum width in pixels of the message box (defaults to 100)
* @type Number
*/
minWidth : 100,
/**
* 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).
* @type Number
*/
minProgressWidth : 250,
/**
* 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).
* @type Number
*/
minPromptWidth: 250,
/**
* 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
* @type Object
*/
buttonText : {
ok : "OK",
cancel : "Cancel",
yes : "Yes",
no : "No"
}
};
}();
/**
* Shorthand for {@link Ext.MessageBox}
*/
Ext.Msg = Ext.MessageBox;