X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/window/MessageBox.js diff --git a/src/window/MessageBox.js b/src/window/MessageBox.js index b6626ca0..c4e99fd7 100644 --- a/src/window/MessageBox.js +++ b/src/window/MessageBox.js @@ -13,42 +13,37 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @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 + * 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', @@ -63,8 +58,6 @@ Ext.define('Ext.window.MessageBox', { 'Ext.ProgressBar' ], - alternateClassName: 'Ext.MessageBox', - alias: 'widget.messagebox', /** @@ -144,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, @@ -355,18 +348,13 @@ Ext.define('Ext.window.MessageBox', { me.width = initialWidth; me.render(Ext.getBody()); } else { - me.hidden = false; me.setSize(initialWidth, me.maxHeight); } me.setPosition(-10000, -10000); // 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) { @@ -444,7 +432,6 @@ Ext.define('Ext.window.MessageBox', { } else { me.bottomTb.show(); } - me.hidden = true; }, /** @@ -502,7 +489,7 @@ Ext.define('Ext.window.MessageBox', { *
  • 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
    A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)
    • + *
  • waitConfig : Object
    A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)
    • *
  • width : Number
    The width of the dialog in pixels
    • * * Example usage: @@ -511,7 +498,7 @@ Ext.Msg.show({ title: 'Address', msg: 'Please enter your address:', width: 300, -buttons: Ext.window.MessageBox.OKCANCEL, +buttons: Ext.Msg.OKCANCEL, multiline: true, fn: saveAddress, animateTarget: 'addAddressBtn', @@ -526,7 +513,7 @@ icon: Ext.window.MessageBox.INFO me.reconfigure(cfg); me.addCls(cfg.cls); if (cfg.animateTarget) { - me.doAutoSize(false); + me.doAutoSize(true); me.callParent(); } else { me.callParent(); @@ -619,9 +606,9 @@ Ext.window.MessageBox.ERROR * Updates a progress-style message box's text and progress bar. Only relevant on message boxes * initiated via {@link Ext.window.MessageBox#progress} or {@link Ext.window.MessageBox#wait}, * or by calling {@link Ext.window.MessageBox#show} with progress: true. - * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0) - * @param {String} progressText The progress text to display inside the progress bar (defaults to '') - * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined + * @param {Number} [value=0] Any number between 0 and 1 (e.g., .5) + * @param {String} [progressText=''] The progress text to display inside the progress bar. + * @param {String} [msg] The 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) * @return {Ext.window.MessageBox} this */ @@ -671,11 +658,11 @@ Ext.window.MessageBox.ERROR * 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 '') + * @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){ @@ -701,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){ @@ -750,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){ @@ -758,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(); });