+/*
+
+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',
'Ext.layout.container.HBox',
'Ext.ProgressBar'
],
-
- alternateClassName: 'Ext.MessageBox',
alias: 'widget.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,
wait: 'Loading...',
alert: 'Attention'
},
-
+
iconHeight: 35,
makeButton: function(btnIdx) {
onPromptKey: function(textField, e) {
var me = this,
blur;
-
+
if (e.keyCode === Ext.EventObject.RETURN || e.keyCode === 10) {
if (me.msgButtons.ok.isVisible()) {
blur = true;
me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
blur = true;
}
-
+
if (blur) {
me.textField.blur();
}
// Default to allowing the Window to take focus.
delete me.defaultFocus;
-
+
// clear any old animateTarget
me.animateTarget = cfg.animateTarget || undefined;
// 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) {
} else {
me.bottomTb.show();
}
- me.hidden = true;
},
/**
* <li><b>title</b> : String<div class="sub-desc">The title text</div></li>
* <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li>
* <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
- * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li>
+ * <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)</div></li>
* <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li>
* </ul>
* Example usage:
title: 'Address',
msg: 'Please enter your address:',
width: 300,
-buttons: Ext.window.MessageBox.OKCANCEL,
+buttons: Ext.Msg.OKCANCEL,
multiline: true,
fn: saveAddress,
animateTarget: 'addAddressBtn',
*/
show: function(cfg) {
var me = this;
-
+
me.reconfigure(cfg);
me.addCls(cfg.cls);
if (cfg.animateTarget) {
- me.doAutoSize(false);
+ me.doAutoSize(true);
me.callParent();
} else {
me.callParent();
}
return me;
},
-
+
afterShow: function(){
if (this.animateTarget) {
this.center();
- }
+ }
this.callParent(arguments);
},
if (!Ext.isDefined(me.frameWidth)) {
me.frameWidth = me.el.getWidth() - me.body.getWidth();
}
-
+
// reset to the original dimensions
icon.setHeight(iconHeight);
* 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
*/
* 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 (<code>this</code> 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 (<code>this</code> 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){
* 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){
* 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){
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
+});
git.ithinksw.org / extjs.git / blobdiff