-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-window.MessageBox'>/**
-</span> * @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
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-window-MessageBox'>/**
+</span> * 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',
-<span id='Ext-window.MessageBox-property-OK'> /**
+<span id='Ext-window-MessageBox-property-OK'> /**
</span> * Button config that displays a single OK button
* @type Number
*/
OK : 1,
-<span id='Ext-window.MessageBox-property-YES'> /**
+<span id='Ext-window-MessageBox-property-YES'> /**
</span> * Button config that displays a single Yes button
* @type Number
*/
YES : 2,
-<span id='Ext-window.MessageBox-property-NO'> /**
+<span id='Ext-window-MessageBox-property-NO'> /**
</span> * Button config that displays a single No button
* @type Number
*/
NO : 4,
-<span id='Ext-window.MessageBox-property-CANCEL'> /**
+<span id='Ext-window-MessageBox-property-CANCEL'> /**
</span> * Button config that displays a single Cancel button
* @type Number
*/
CANCEL : 8,
-<span id='Ext-window.MessageBox-property-OKCANCEL'> /**
+<span id='Ext-window-MessageBox-property-OKCANCEL'> /**
</span> * Button config that displays OK and Cancel buttons
* @type Number
*/
OKCANCEL : 9,
-<span id='Ext-window.MessageBox-property-YESNO'> /**
+<span id='Ext-window-MessageBox-property-YESNO'> /**
</span> * Button config that displays Yes and No buttons
* @type Number
*/
YESNO : 6,
-<span id='Ext-window.MessageBox-property-YESNOCANCEL'> /**
+<span id='Ext-window-MessageBox-property-YESNOCANCEL'> /**
</span> * Button config that displays Yes, No and Cancel buttons
* @type Number
*/
YESNOCANCEL : 14,
-<span id='Ext-window.MessageBox-property-INFO'> /**
+<span id='Ext-window-MessageBox-property-INFO'> /**
</span> * The CSS class that provides the INFO icon image
* @type String
*/
INFO : 'ext-mb-info',
-<span id='Ext-window.MessageBox-property-WARNING'> /**
+<span id='Ext-window-MessageBox-property-WARNING'> /**
</span> * The CSS class that provides the WARNING icon image
* @type String
*/
WARNING : 'ext-mb-warning',
-<span id='Ext-window.MessageBox-property-QUESTION'> /**
+<span id='Ext-window-MessageBox-property-QUESTION'> /**
</span> * The CSS class that provides the QUESTION icon image
* @type String
*/
QUESTION : 'ext-mb-question',
-<span id='Ext-window.MessageBox-property-ERROR'> /**
+<span id='Ext-window-MessageBox-property-ERROR'> /**
</span> * The CSS class that provides the ERROR icon image
* @type String
*/
type: 'anchor'
},
-<span id='Ext-window.MessageBox-property-defaultTextHeight'> /**
-</span> * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
+<span id='Ext-window-MessageBox-property-defaultTextHeight'> /**
+</span> * The default height in pixels of the message box's multiline textarea if displayed.
* @type Number
*/
defaultTextHeight : 75,
-<span id='Ext-window.MessageBox-property-minProgressWidth'> /**
+<span id='Ext-window-MessageBox-property-minProgressWidth'> /**
</span> * 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,
-<span id='Ext-window.MessageBox-property-minPromptWidth'> /**
+<span id='Ext-window-MessageBox-property-minPromptWidth'> /**
</span> * 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,
-<span id='Ext-window.MessageBox-property-buttonText'> /**
+<span id='Ext-window-MessageBox-property-buttonText'> /**
</span> * 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.
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;
},
-<span id='Ext-window.MessageBox-method-show'> /**
+<span id='Ext-window-MessageBox-method-show'> /**
</span> * 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.
* <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);
return this.doAutoSize(true);
},
-<span id='Ext-window.MessageBox-method-setIcon'> /**
+<span id='Ext-window-MessageBox-method-setIcon'> /**
</span> * 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.
return me;
},
-<span id='Ext-window.MessageBox-method-updateProgress'> /**
+<span id='Ext-window-MessageBox-method-updateProgress'> /**
</span> * 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
*/
}
},
-<span id='Ext-window.MessageBox-method-confirm'> /**
+<span id='Ext-window-MessageBox-method-confirm'> /**
</span> * 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
return this.show(cfg);
},
-<span id='Ext-window.MessageBox-method-prompt'> /**
+<span id='Ext-window-MessageBox-method-prompt'> /**
</span> * 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 (<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){
return this.show(cfg);
},
-<span id='Ext-window.MessageBox-method-wait'> /**
+<span id='Ext-window-MessageBox-method-wait'> /**
</span> * 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
+ * @param {Object} config (optional) A {@link Ext.ProgressBar#wait} config object
* @return {Ext.window.MessageBox} this
*/
wait : function(cfg, title, config){
return this.show(cfg);
},
-<span id='Ext-window.MessageBox-method-alert'> /**
+<span id='Ext-window-MessageBox-method-alert'> /**
</span> * 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
return this.show(cfg);
},
-<span id='Ext-window.MessageBox-method-progress'> /**
+<span id='Ext-window-MessageBox-method-progress'> /**
</span> * 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.window.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 '')
+ * @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() {
+<span id='Ext-MessageBox'> /**
+</span> * @class Ext.MessageBox
+ * @alternateClassName Ext.Msg
+ * @extends Ext.window.MessageBox
+ * @singleton
+ * Singleton instance of {@link Ext.window.MessageBox}.
+ */
Ext.MessageBox = Ext.Msg = new this();
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff