X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/window/MessageBox.js diff --git a/src/window/MessageBox.js b/src/window/MessageBox.js index f4324e59..c4e99fd7 100644 --- a/src/window/MessageBox.js +++ b/src/window/MessageBox.js @@ -1,41 +1,49 @@ +/* + +This file is part of Ext JS 4 + +Copyright (c) 2011 Sencha Inc + +Contact: http://www.sencha.com/contact + +GNU General Public License Usage +This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html. + +If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact. + +*/ /** - * @class Ext.window.MessageBox - * @extends Ext.window.Window - -Utility class for generating different styles of message boxes. The singleton instance, `Ext.Msg` can also be used. -Note that a 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). - -{@img Ext.window.MessageBox/messagebox1.png alert MessageBox} -{@img Ext.window.MessageBox/messagebox2.png prompt MessageBox} -{@img Ext.window.MessageBox/messagebox3.png show MessageBox} -#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, - animateTarget: 'elId', - icon: Ext.window.MessageBox.QUESTION - }); - - * @markdown - * @singleton - * @xtype messagebox + * Utility class for generating different styles of message boxes. The singleton instance, Ext.MessageBox + * alias `Ext.Msg` can also be used. + * + * Note that a 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). + * + * Basic alert + * + * @example + * Ext.Msg.alert('Status', 'Changes saved successfully.'); + * + * Prompt for user data and process the result using a callback + * + * @example + * 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 + * + * @example + * 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, + * icon: Ext.Msg.QUESTION + * }); */ Ext.define('Ext.window.MessageBox', { extend: 'Ext.window.Window', @@ -49,8 +57,6 @@ Ext.define('Ext.window.MessageBox', { 'Ext.layout.container.HBox', 'Ext.ProgressBar' ], - - alternateClassName: 'Ext.MessageBox', alias: 'widget.messagebox', @@ -131,19 +137,19 @@ Ext.define('Ext.window.MessageBox', { }, /** - * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) + * The default height in pixels of the message box's multiline textarea if displayed. * @type Number */ defaultTextHeight : 75, /** * 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). + * for setting a different minimum width than text-only dialogs may need. * @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). + * for setting a different minimum width than text-only dialogs may need. * @type Number */ minPromptWidth: 250, @@ -171,7 +177,7 @@ Ext.define('Ext.window.MessageBox', { wait: 'Loading...', alert: 'Attention' }, - + iconHeight: 35, makeButton: function(btnIdx) { @@ -295,7 +301,7 @@ Ext.define('Ext.window.MessageBox', { onPromptKey: function(textField, e) { var me = this, blur; - + if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) { if (me.msgButtons.ok.isVisible()) { blur = true; @@ -304,7 +310,7 @@ Ext.define('Ext.window.MessageBox', { me.msgButtons.yes.handler.call(me, me.msgButtons.yes); blur = true; } - + if (blur) { me.textField.blur(); } @@ -326,7 +332,7 @@ Ext.define('Ext.window.MessageBox', { // Default to allowing the Window to take focus. delete me.defaultFocus; - + // clear any old animateTarget me.animateTarget = cfg.animateTarget || undefined; @@ -348,11 +354,7 @@ Ext.define('Ext.window.MessageBox', { // Hide or show the close tool me.closable = cfg.closable && !cfg.wait; - if (cfg.closable === false) { - me.tools.close.hide(); - } else { - me.tools.close.show(); - } + me.header.child('[type=close]').setVisible(cfg.closable !== false); // Hide or show the header if (!cfg.title && !me.closable) { @@ -430,7 +432,6 @@ Ext.define('Ext.window.MessageBox', { } else { me.bottomTb.show(); } - me.hidden = true; }, /** @@ -488,7 +489,7 @@ Ext.define('Ext.window.MessageBox', { *
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 '')
+ * @param {Function} [fn] The callback function invoked after the message box is closed
+ * @param {Object} [scope] The scope (this
reference) in which the callback is executed. Defaults to the browser wnidow.
+ * @param {Boolean/Number} [multiline=false] True to create a multiline textbox using the defaultTextHeight
+ * property, or the height in pixels to create the textbox/
+ * @param {String} [value=''] Default value of the text input element
* @return {Ext.window.MessageBox} this
*/
prompt : function(cfg, msg, fn, scope, multiline, value){
@@ -687,7 +688,7 @@ Ext.window.MessageBox.ERROR
* 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
+ * @param {Object} config (optional) A {@link Ext.ProgressBar#wait} config object
* @return {Ext.window.MessageBox} this
*/
wait : function(cfg, title, config){
@@ -736,7 +737,7 @@ Ext.window.MessageBox.ERROR
* 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 '')
+ * @param {String} [progressText=''] The text to display inside the progress bar
* @return {Ext.window.MessageBox} this
*/
progress : function(cfg, msg, progressText){
@@ -744,11 +745,19 @@ Ext.window.MessageBox.ERROR
cfg = {
title: cfg,
msg: msg,
+ progress: true,
progressText: progressText
};
}
return this.show(cfg);
}
}, function() {
+ /**
+ * @class Ext.MessageBox
+ * @alternateClassName Ext.Msg
+ * @extends Ext.window.MessageBox
+ * @singleton
+ * Singleton instance of {@link Ext.window.MessageBox}.
+ */
Ext.MessageBox = Ext.Msg = new this();
-});
\ No newline at end of file
+});