<!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">// @define Ext.MessageBox, Ext.Msg
|
|
<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 #method-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',
|
|
requires: [
|
'Ext.toolbar.Toolbar',
|
'Ext.form.field.Text',
|
'Ext.form.field.TextArea',
|
'Ext.form.field.Display',
|
'Ext.button.Button',
|
'Ext.layout.container.Anchor',
|
'Ext.layout.container.HBox',
|
'Ext.ProgressBar'
|
],
|
|
alias: 'widget.messagebox',
|
|
<span id='Ext-window-MessageBox-property-OK'> /**
|
</span> * @property
|
* Button config that displays a single OK button
|
*/
|
OK : 1,
|
<span id='Ext-window-MessageBox-property-YES'> /**
|
</span> * @property
|
* Button config that displays a single Yes button
|
*/
|
YES : 2,
|
<span id='Ext-window-MessageBox-property-NO'> /**
|
</span> * @property
|
* Button config that displays a single No button
|
*/
|
NO : 4,
|
<span id='Ext-window-MessageBox-property-CANCEL'> /**
|
</span> * @property
|
* Button config that displays a single Cancel button
|
*/
|
CANCEL : 8,
|
<span id='Ext-window-MessageBox-property-OKCANCEL'> /**
|
</span> * @property
|
* Button config that displays OK and Cancel buttons
|
*/
|
OKCANCEL : 9,
|
<span id='Ext-window-MessageBox-property-YESNO'> /**
|
</span> * @property
|
* Button config that displays Yes and No buttons
|
*/
|
YESNO : 6,
|
<span id='Ext-window-MessageBox-property-YESNOCANCEL'> /**
|
</span> * @property
|
* Button config that displays Yes, No and Cancel buttons
|
*/
|
YESNOCANCEL : 14,
|
<span id='Ext-window-MessageBox-property-INFO'> /**
|
</span> * @property
|
* The CSS class that provides the INFO icon image
|
*/
|
INFO : Ext.baseCSSPrefix + 'message-box-info',
|
<span id='Ext-window-MessageBox-property-WARNING'> /**
|
</span> * @property
|
* The CSS class that provides the WARNING icon image
|
*/
|
WARNING : Ext.baseCSSPrefix + 'message-box-warning',
|
<span id='Ext-window-MessageBox-property-QUESTION'> /**
|
</span> * @property
|
* The CSS class that provides the QUESTION icon image
|
*/
|
QUESTION : Ext.baseCSSPrefix + 'message-box-question',
|
<span id='Ext-window-MessageBox-property-ERROR'> /**
|
</span> * @property
|
* The CSS class that provides the ERROR icon image
|
*/
|
ERROR : Ext.baseCSSPrefix + 'message-box-error',
|
|
<span id='Ext-window-MessageBox-cfg-hideMode'> // hide it by offsets. Windows are hidden on render by default.
|
</span> hideMode: 'offsets',
|
<span id='Ext-window-MessageBox-cfg-closeAction'> closeAction: 'hide',
|
</span><span id='Ext-window-MessageBox-cfg-resizable'> resizable: false,
|
</span><span id='Ext-window-MessageBox-cfg-title'> title: '&#160;',
|
</span>
|
<span id='Ext-window-MessageBox-property-defaultMinWidth'> defaultMinWidth: 250,
|
</span><span id='Ext-window-MessageBox-property-defaultMaxWidth'> defaultMaxWidth: 600,
|
</span><span id='Ext-window-MessageBox-property-defaultMinHeight'> defaultMinHeight: 110,
|
</span><span id='Ext-window-MessageBox-property-defaultMaxHeight'> defaultMaxHeight: 500,
|
</span>
|
<span id='Ext-window-MessageBox-cfg-minWidth'> // Forcibly set these to null on the prototype to override anything set higher in
|
</span> // the hierarchy
|
minWidth: null,
|
<span id='Ext-window-MessageBox-cfg-maxWidth'> maxWidth: null,
|
</span><span id='Ext-window-MessageBox-cfg-minHeight'> minHeight: null,
|
</span><span id='Ext-window-MessageBox-cfg-maxHeight'> maxHeight: null,
|
</span><span id='Ext-window-MessageBox-cfg-constrain'> constrain: true,
|
</span>
|
<span id='Ext-window-MessageBox-cfg-cls'> cls: [Ext.baseCSSPrefix + 'message-box', Ext.baseCSSPrefix + 'hide-offsets'],
|
</span>
|
<span id='Ext-window-MessageBox-cfg-layout'> layout: {
|
</span> type: 'vbox',
|
align: 'stretch'
|
},
|
|
<span id='Ext-window-MessageBox-cfg-shrinkWrapDock'> // We want to shrinkWrap around all docked items
|
</span> shrinkWrapDock: true,
|
|
<span id='Ext-window-MessageBox-property-defaultTextHeight'> /**
|
</span> * @property
|
* The default height in pixels of the message box's multiline textarea if displayed.
|
*/
|
defaultTextHeight : 75,
|
<span id='Ext-window-MessageBox-property-minProgressWidth'> /**
|
</span> * @property
|
* 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.
|
*/
|
minProgressWidth : 250,
|
<span id='Ext-window-MessageBox-property-minPromptWidth'> /**
|
</span> * @property
|
* 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.
|
*/
|
minPromptWidth: 250,
|
//<locale type="object">
|
<span id='Ext-window-MessageBox-property-buttonText'> /**
|
</span> * @property
|
* 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.window.MessageBox.buttonText.yes = "oui"; //french
|
*/
|
buttonText: {
|
ok: 'OK',
|
yes: 'Yes',
|
no: 'No',
|
cancel: 'Cancel'
|
},
|
<span id='Ext-window-MessageBox-property-buttonIds'> //</locale>
|
</span>
|
buttonIds: [
|
'ok', 'yes', 'no', 'cancel'
|
],
|
|
<span id='Ext-window-MessageBox-property-titleText'> //<locale type="object">
|
</span> titleText: {
|
confirm: 'Confirm',
|
prompt: 'Prompt',
|
wait: 'Loading...',
|
alert: 'Attention'
|
},
|
<span id='Ext-window-MessageBox-property-iconHeight'> //</locale>
|
</span>
|
iconHeight: 35,
|
<span id='Ext-window-MessageBox-property-iconWidth'> iconWidth: 50,
|
</span>
|
<span id='Ext-window-MessageBox-method-makeButton'> makeButton: function(btnIdx) {
|
</span> var btnId = this.buttonIds[btnIdx];
|
return new Ext.button.Button({
|
handler: this.btnCallback,
|
itemId: btnId,
|
scope: this,
|
text: this.buttonText[btnId],
|
minWidth: 75
|
});
|
},
|
|
<span id='Ext-window-MessageBox-method-btnCallback'> btnCallback: function(btn) {
|
</span> var me = this,
|
value,
|
field;
|
|
if (me.cfg.prompt || me.cfg.multiline) {
|
if (me.cfg.multiline) {
|
field = me.textArea;
|
} else {
|
field = me.textField;
|
}
|
value = field.getValue();
|
field.reset();
|
}
|
|
// Component.onHide blurs the active element if the Component contains the active element
|
me.hide();
|
me.userCallback(btn.itemId, value, me.cfg);
|
},
|
|
<span id='Ext-window-MessageBox-method-hide'> hide: function() {
|
</span> var me = this,
|
cls = me.cfg.cls;
|
|
me.dd.endDrag();
|
me.progressBar.reset();
|
if (cls) {
|
me.removeCls(cls);
|
}
|
me.callParent(arguments);
|
},
|
|
<span id='Ext-window-MessageBox-method-constructor'> constructor: function(cfg) {
|
</span> var me = this;
|
|
me.callParent(arguments);
|
|
// set the default min/max/Width/Height to the initially configured min/max/Width/Height
|
// so that it will be used as the default when reconfiguring.
|
me.minWidth = me.defaultMinWidth = (me.minWidth || me.defaultMinWidth);
|
me.maxWidth = me.defaultMaxWidth = (me.maxWidth || me.defaultMaxWidth);
|
me.minHeight = me.defaultMinHeight = (me.minHeight || me.defaultMinHeight);
|
me.maxHeight = me.defaultMaxHeight = (me.maxHeight || me.defaultMaxHeight);
|
},
|
|
<span id='Ext-window-MessageBox-method-initComponent'> initComponent: function(cfg) {
|
</span> var me = this,
|
baseId = me.id,
|
i, button;
|
|
me.title = '&#160;';
|
|
me.topContainer = new Ext.container.Container({
|
layout: 'hbox',
|
padding: 10,
|
style: {
|
overflow: 'hidden'
|
},
|
items: [
|
me.iconComponent = new Ext.Component({
|
width: me.iconWidth,
|
height: me.iconHeight
|
}),
|
me.promptContainer = new Ext.container.Container({
|
flex: 1,
|
layout: 'anchor',
|
items: [
|
me.msg = new Ext.form.field.Display({
|
id: baseId + '-displayfield',
|
cls: me.baseCls + '-text'
|
}),
|
me.textField = new Ext.form.field.Text({
|
id: baseId + '-textfield',
|
anchor: '100%',
|
enableKeyEvents: true,
|
listeners: {
|
keydown: me.onPromptKey,
|
scope: me
|
}
|
}),
|
me.textArea = new Ext.form.field.TextArea({
|
id: baseId + '-textarea',
|
anchor: '100%',
|
height: 75
|
})
|
]
|
})
|
]
|
});
|
me.progressBar = new Ext.ProgressBar({
|
id: baseId + '-progressbar',
|
margins: '0 10 10 10'
|
});
|
|
me.items = [me.topContainer, me.progressBar];
|
|
// Create the buttons based upon passed bitwise config
|
me.msgButtons = [];
|
for (i = 0; i < 4; i++) {
|
button = me.makeButton(i);
|
me.msgButtons[button.itemId] = button;
|
me.msgButtons.push(button);
|
}
|
me.bottomTb = new Ext.toolbar.Toolbar({
|
id: baseId + '-toolbar',
|
ui: 'footer',
|
dock: 'bottom',
|
layout: {
|
pack: 'center'
|
},
|
items: [
|
me.msgButtons[0],
|
me.msgButtons[1],
|
me.msgButtons[2],
|
me.msgButtons[3]
|
]
|
});
|
me.dockedItems = [me.bottomTb];
|
me.on('close', me.onClose, me);
|
me.callParent();
|
},
|
|
<span id='Ext-window-MessageBox-method-onClose'> onClose: function(){
|
</span> var btn = this.header.child('[type=close]');
|
// Give a temporary itemId so it can act like the cancel button
|
btn.itemId = 'cancel';
|
this.btnCallback(btn);
|
delete btn.itemId;
|
},
|
|
<span id='Ext-window-MessageBox-method-onPromptKey'> onPromptKey: function(textField, e) {
|
</span> var me = this;
|
|
if (e.keyCode === e.RETURN || e.keyCode === 10) {
|
if (me.msgButtons.ok.isVisible()) {
|
me.msgButtons.ok.handler.call(me, me.msgButtons.ok);
|
} else if (me.msgButtons.yes.isVisible()) {
|
me.msgButtons.yes.handler.call(me, me.msgButtons.yes);
|
}
|
}
|
},
|
|
<span id='Ext-window-MessageBox-method-reconfigure'> reconfigure: function(cfg) {
|
</span> var me = this,
|
buttons = 0,
|
hideToolbar = true,
|
oldButtonText = me.buttonText,
|
resizer = me.resizer,
|
resizeTracker, width, height, i, textArea, textField,
|
msg, progressBar, msgButtons;
|
|
// Restore default buttonText before reconfiguring.
|
me.updateButtonText();
|
|
cfg = cfg || {};
|
me.cfg = cfg;
|
if (cfg.width) {
|
width = cfg.width;
|
}
|
|
if (cfg.height) {
|
height = cfg.height;
|
}
|
|
me.minWidth = cfg.minWidth || me.defaultMinWidth;
|
me.maxWidth = cfg.maxWidth || me.defaultMaxWidth;
|
me.minHeight = cfg.minHeight || me.defaultMinHeight;
|
me.maxHeight = cfg.maxHeight || me.defaultMaxHeight;
|
|
if (resizer) {
|
resizeTracker = resizer.resizeTracker;
|
resizer.minWidth = resizeTracker.minWidth = me.minWidth;
|
resizer.maxWidth = resizeTracker.maxWidth = me.maxWidth;
|
resizer.minHeight = resizeTracker.minHeight = me.minHeight;
|
resizer.maxHeight = resizeTracker.maxHeight = me.maxHeight;
|
}
|
|
// Default to allowing the Window to take focus.
|
delete me.defaultFocus;
|
if (cfg.defaultFocus) {
|
me.defaultFocus = cfg.defaultFocus;
|
}
|
|
// clear any old animateTarget
|
me.animateTarget = cfg.animateTarget || undefined;
|
|
// Defaults to modal
|
me.modal = cfg.modal !== false;
|
|
// Show the title/icon
|
me.setTitle(cfg.title || '');
|
me.setIconCls(cfg.iconCls || '');
|
|
// Extract button configs
|
if (Ext.isObject(cfg.buttons)) {
|
me.buttonText = cfg.buttons;
|
buttons = 0;
|
} else {
|
me.buttonText = cfg.buttonText || me.buttonText;
|
buttons = Ext.isNumber(cfg.buttons) ? cfg.buttons : 0;
|
}
|
|
// Apply custom-configured buttonText
|
// Infer additional buttons from the specified property names in the buttonText object
|
buttons = buttons | me.updateButtonText();
|
|
// Restore buttonText. Next run of reconfigure will restore to prototype's buttonText
|
me.buttonText = oldButtonText;
|
|
// During the on render, or size resetting layouts, and in subsequent hiding and showing, we need to
|
// suspend layouts, and flush at the end when the Window's children are at their final visibility.
|
Ext.suspendLayouts();
|
delete me.width;
|
delete me.height;
|
if (width || height) {
|
if (width) {
|
me.setWidth(width);
|
}
|
|
if (height) {
|
me.setHeight(height);
|
}
|
}
|
me.hidden = false;
|
if (!me.rendered) {
|
me.render(Ext.getBody());
|
}
|
|
// Hide or show the close tool
|
me.closable = cfg.closable !== false && !cfg.wait;
|
me.header.child('[type=close]').setVisible(me.closable);
|
|
// Hide or show the header
|
if (!cfg.title && !me.closable && !cfg.iconCls) {
|
me.header.hide();
|
} else {
|
me.header.show();
|
}
|
|
// Default to dynamic drag: drag the window, not a ghost
|
me.liveDrag = !cfg.proxyDrag;
|
|
// wrap the user callback
|
me.userCallback = Ext.Function.bind(cfg.callback ||cfg.fn || Ext.emptyFn, cfg.scope || Ext.global);
|
|
// Hide or show the icon Component
|
me.setIcon(cfg.icon, cfg.iconWidth, cfg.iconHeight);
|
|
// Hide or show the message area
|
msg = me.msg;
|
if (cfg.msg) {
|
msg.setValue(cfg.msg);
|
msg.show();
|
} else {
|
msg.hide();
|
}
|
|
// Hide or show the input field
|
textArea = me.textArea;
|
textField = me.textField;
|
if (cfg.prompt || cfg.multiline) {
|
me.multiline = cfg.multiline;
|
if (cfg.multiline) {
|
textArea.setValue(cfg.value);
|
textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight);
|
textArea.show();
|
textField.hide();
|
me.defaultFocus = textArea;
|
} else {
|
textField.setValue(cfg.value);
|
textArea.hide();
|
textField.show();
|
me.defaultFocus = textField;
|
}
|
} else {
|
textArea.hide();
|
textField.hide();
|
}
|
|
// Hide or show the progress bar
|
progressBar = me.progressBar;
|
if (cfg.progress || cfg.wait) {
|
progressBar.show();
|
me.updateProgress(0, cfg.progressText);
|
if(cfg.wait === true){
|
progressBar.wait(cfg.waitConfig);
|
}
|
} else {
|
progressBar.hide();
|
}
|
|
// Hide or show buttons depending on flag value sent.
|
msgButtons = me.msgButtons;
|
for (i = 0; i < 4; i++) {
|
if (buttons & Math.pow(2, i)) {
|
|
// Default to focus on the first visible button if focus not already set
|
if (!me.defaultFocus) {
|
me.defaultFocus = msgButtons[i];
|
}
|
msgButtons[i].show();
|
hideToolbar = false;
|
} else {
|
msgButtons[i].hide();
|
}
|
}
|
|
// Hide toolbar if no buttons to show
|
if (hideToolbar) {
|
me.bottomTb.hide();
|
} else {
|
me.bottomTb.show();
|
}
|
Ext.resumeLayouts(true);
|
},
|
|
<span id='Ext-window-MessageBox-method-updateButtonText'> /**
|
</span> * @private
|
* Set button text according to current buttonText property object
|
* @return {Number} The buttons bitwise flag based upon the button IDs specified in the buttonText property.
|
*/
|
updateButtonText: function() {
|
var me = this,
|
buttonText = me.buttonText,
|
buttons = 0,
|
btnId,
|
btn;
|
|
for (btnId in buttonText) {
|
if (buttonText.hasOwnProperty(btnId)) {
|
btn = me.msgButtons[btnId];
|
if (btn) {
|
if (me.cfg && me.cfg.buttonText) {
|
buttons = buttons | Math.pow(2, Ext.Array.indexOf(me.buttonIds, btnId));
|
}
|
if (btn.text != buttonText[btnId]) {
|
btn.setText(buttonText[btnId]);
|
}
|
}
|
}
|
}
|
return buttons;
|
},
|
|
<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.
|
*
|
* Example usage:
|
*
|
* Ext.Msg.show({
|
* title: 'Address',
|
* msg: 'Please enter your address:',
|
* width: 300,
|
* buttons: Ext.Msg.OKCANCEL,
|
* multiline: true,
|
* fn: saveAddress,
|
* animateTarget: 'addAddressBtn',
|
* icon: Ext.window.MessageBox.INFO
|
* });
|
*
|
* @param {Object} config The following config options are supported:
|
*
|
* @param {String/Ext.dom.Element} config.animateTarget
|
* An id or Element from which the message box should animate as it opens and closes.
|
*
|
* @param {Number} [config.buttons=false]
|
* A bitwise button specifier consisting of the sum of any of the following constants:
|
*
|
* - Ext.MessageBox.OK
|
* - Ext.MessageBox.YES
|
* - Ext.MessageBox.NO
|
* - Ext.MessageBox.CANCEL
|
*
|
* Some common combinations have already been predefined:
|
*
|
* - Ext.MessageBox.OKCANCEL
|
* - Ext.MessageBox.YESNO
|
* - Ext.MessageBox.YESNOCANCEL
|
*
|
* Or false to not show any buttons.
|
*
|
* This may also be specified as an object hash containing custom button text in the same format as the
|
* {@link #buttonText} config. Button IDs present as property names will be made visible.
|
*
|
* @param {Boolean} config.closable
|
* False to hide the top-right close button (defaults to true). Note that progress and wait dialogs will ignore this
|
* property and always hide the close button as they can only be closed programmatically.
|
*
|
* @param {String} config.cls
|
* A custom CSS class to apply to the message box's container element
|
*
|
* @param {Number} [config.defaultTextHeight=75]
|
* The default height in pixels of the message box's multiline textarea if displayed.
|
*
|
* @param {Function} config.fn
|
* A callback function which is called when the dialog is dismissed either by clicking on the configured buttons, or
|
* on the dialog close button, or by pressing the return button to enter input.
|
*
|
* 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:
|
*
|
* @param {String} config.fn.buttonId The ID of the button pressed, one of:
|
*
|
* - ok
|
* - yes
|
* - no
|
* - cancel
|
*
|
* @param {String} config.fn.text Value of the input field if either `prompt` or `multiline` is true
|
* @param {Object} config.fn.opt The config object passed to show.
|
*
|
* @param {Object} config.buttonText
|
* An object containing string properties which override the system-supplied button text values just for this
|
* invocation. The property names are:
|
*
|
* - ok
|
* - yes
|
* - no
|
* - cancel
|
*
|
* @param {Object} config.scope
|
* The scope (`this` reference) in which the function will be executed.
|
*
|
* @param {String} config.icon
|
* A CSS class that provides a background image to be used as the body icon for the dialog.
|
* One can use a predefined icon class:
|
*
|
* - Ext.MessageBox.INFO
|
* - Ext.MessageBox.WARNING
|
* - Ext.MessageBox.QUESTION
|
* - Ext.MessageBox.ERROR
|
*
|
* or use just any `'custom-class'`. Defaults to empty string.
|
*
|
* @param {String} config.iconCls
|
* The standard {@link Ext.window.Window#iconCls} to add an optional header icon (defaults to '')
|
*
|
* @param {String} config.defaultFocus
|
* The button to focus when showing the dialog. If not specified, defaults to
|
* the first visible button.
|
*
|
* @param {Number} config.maxWidth
|
* The maximum width in pixels of the message box (defaults to 600)
|
*
|
* @param {Number} config.minWidth
|
* The minimum width in pixels of the message box (defaults to 100)
|
*
|
* @param {Boolean} config.modal
|
* False to allow user interaction with the page while the message box is displayed (defaults to true)
|
*
|
* @param {String} config.msg
|
* A string that will replace the existing message box body text (defaults to the XHTML-compliant non-breaking space
|
* character '&#160;')
|
*
|
* @param {Boolean} config.multiline
|
* True to prompt the user to enter multi-line text (defaults to false)
|
*
|
* @param {Boolean} config.progress
|
* True to display a progress bar (defaults to false)
|
*
|
* @param {String} config.progressText
|
* The text to display inside the progress bar if progress = true (defaults to '')
|
*
|
* @param {Boolean} config.prompt
|
* True to prompt the user to enter single-line text (defaults to false)
|
*
|
* @param {Boolean} config.proxyDrag
|
* True to display a lightweight proxy while dragging (defaults to false)
|
*
|
* @param {String} config.title
|
* The title text
|
*
|
* @param {String} config.value
|
* The string value to set into the active textbox element if displayed
|
*
|
* @param {Boolean} config.wait
|
* True to display a progress bar (defaults to false)
|
*
|
* @param {Object} config.waitConfig
|
* A {@link Ext.ProgressBar#wait} config object (applies only if wait = true)
|
*
|
* @param {Number} config.width
|
* The width of the dialog in pixels
|
*
|
* @return {Ext.window.MessageBox} this
|
*/
|
show: function(cfg) {
|
var me = this,
|
visibleFocusables;
|
|
// If called during global layout suspension, make the call after layout resumption
|
if (Ext.AbstractComponent.layoutSuspendCount) {
|
Ext.on({
|
resumelayouts: function() {
|
me.show(cfg);
|
},
|
single: true
|
});
|
return me;
|
}
|
|
me.reconfigure(cfg);
|
if (cfg.cls) {
|
me.addCls(cfg.cls);
|
}
|
|
// Do not steal focus from anything that may be focused if the MessageBox has no visible focusable
|
// items. For example, a "wait" message box should not get focus.
|
visibleFocusables = me.query('textfield:not([hidden]),textarea:not([hidden]),button:not([hidden])');
|
me.preventFocusOnActivate = !visibleFocusables.length;
|
|
// Set the flag, so that the parent show method performs the show procedure that we need.
|
// ie: animation from animTarget, onShow processing and focusing.
|
me.hidden = true;
|
me.callParent();
|
return me;
|
},
|
|
<span id='Ext-window-MessageBox-method-onShow'> onShow: function() {
|
</span> this.callParent(arguments);
|
this.center();
|
},
|
|
<span id='Ext-window-MessageBox-method-updateText'> updateText: function(text) {
|
</span> this.msg.setValue(text);
|
},
|
|
<span id='Ext-window-MessageBox-method-setIcon'> /**
|
</span> * Adds the specified icon to the dialog. By default, the class 'x-messagebox-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.
|
* The following built-in icon classes are supported, but you can also pass in a custom class name:
|
*
|
* Ext.window.MessageBox.INFO
|
* Ext.window.MessageBox.WARNING
|
* Ext.window.MessageBox.QUESTION
|
* Ext.window.MessageBox.ERROR
|
*
|
* @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
|
* @param {Number} [width] The width of the icon. If not specified, the default is used
|
* @param {Number} [height] The height of the icon. If not specified, the default is used
|
* @return {Ext.window.MessageBox} this
|
*/
|
setIcon : function(icon, width, height) {
|
var me = this,
|
iconCmp = me.iconComponent,
|
cls = me.messageIconCls;
|
|
if (cls) {
|
iconCmp.removeCls(cls);
|
}
|
|
if (icon) {
|
iconCmp.show();
|
iconCmp.setSize(width || me.iconWidth, height || me.iconHeight);
|
iconCmp.addCls(Ext.baseCSSPrefix + 'dlg-icon');
|
iconCmp.addCls(me.messageIconCls = icon);
|
} else {
|
iconCmp.removeCls(Ext.baseCSSPrefix + 'dlg-icon');
|
iconCmp.hide();
|
}
|
return me;
|
},
|
|
<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#method-show} with progress: true.
|
*
|
* @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
|
*/
|
updateProgress : function(value, progressText, msg){
|
this.progressBar.updateProgress(value, progressText);
|
if (msg){
|
this.updateText(msg);
|
}
|
return this;
|
},
|
|
<span id='Ext-window-MessageBox-method-onEsc'> onEsc: function() {
|
</span> if (this.closable !== false) {
|
this.callParent(arguments);
|
}
|
},
|
|
<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
|
* (could also be the top-right close button, which will always report as "cancel").
|
*
|
* @param {String} title The title bar text
|
* @param {String} msg The message box body text
|
* @param {Function} [fn] The callback function invoked after the message box is closed.
|
* See {@link #method-show} method for details.
|
* @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
|
* @return {Ext.window.MessageBox} this
|
*/
|
confirm: function(cfg, msg, fn, scope) {
|
if (Ext.isString(cfg)) {
|
cfg = {
|
title: cfg,
|
icon: this.QUESTION,
|
msg: msg,
|
buttons: this.YESNO,
|
callback: fn,
|
scope: scope
|
};
|
}
|
return this.show(cfg);
|
},
|
|
<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, which will always report as "cancel") 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] The callback function invoked after the message box is closed.
|
* See {@link #method-show} method for details.
|
* @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
|
* @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){
|
if (Ext.isString(cfg)) {
|
cfg = {
|
prompt: true,
|
title: cfg,
|
minWidth: this.minPromptWidth,
|
msg: msg,
|
buttons: this.OKCANCEL,
|
callback: fn,
|
scope: scope,
|
multiline: multiline,
|
value: value
|
};
|
}
|
return this.show(cfg);
|
},
|
|
<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] The title bar text
|
* @param {Object} [config] A {@link Ext.ProgressBar#wait} config object
|
* @return {Ext.window.MessageBox} this
|
*/
|
wait : function(cfg, title, config){
|
if (Ext.isString(cfg)) {
|
cfg = {
|
title : title,
|
msg : cfg,
|
closable: false,
|
wait: true,
|
modal: true,
|
minWidth: this.minProgressWidth,
|
waitConfig: config
|
};
|
}
|
return this.show(cfg);
|
},
|
|
<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
|
* (could also be the top-right close button, which will always report as "cancel").
|
*
|
* @param {String} title The title bar text
|
* @param {String} msg The message box body text
|
* @param {Function} [fn] The callback function invoked after the message box is closed.
|
* See {@link #method-show} method for details.
|
* @param {Object} [scope=window] The scope (<code>this</code> reference) in which the callback is executed.
|
* @return {Ext.window.MessageBox} this
|
*/
|
alert: function(cfg, msg, fn, scope) {
|
if (Ext.isString(cfg)) {
|
cfg = {
|
title : cfg,
|
msg : msg,
|
buttons: this.OK,
|
fn: fn,
|
scope : scope,
|
minWidth: this.minWidth
|
};
|
}
|
return this.show(cfg);
|
},
|
|
<span id='Ext-window-MessageBox-method-progress'> /**
|
</span> * Displays a message box with a progress bar.
|
*
|
* 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=''] The text to display inside the progress bar
|
* @return {Ext.window.MessageBox} this
|
*/
|
progress : function(cfg, msg, progressText){
|
if (Ext.isString(cfg)) {
|
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>
|
</body>
|
</html>
|