/** - * @class Ext.MessageBox - *Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
- *Note that the 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 thefunctionparameter for {@link #show} for more details).Example usage:
- *- * @singleton - */ -Ext.MessageBox = function(){ - var dlg, opt, mask, waitTimer, - bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl, - buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '', - buttonNames = ['ok', 'yes', 'no', 'cancel']; - - // private - var handleButton = function(button){ - buttons[button].blur(); - if(dlg.isVisible()){ - dlg.hide(); - handleHide(); - Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1); - } - }; - - // private - var handleHide = function(){ - if(opt && opt.cls){ - dlg.el.removeClass(opt.cls); - } - progressBar.reset(); - }; - - // private - var handleEsc = function(d, k, e){ - if(opt && opt.closable !== false){ - dlg.hide(); - handleHide(); - } - if(e){ - e.stopEvent(); - } - }; - - // private - var updateButtons = function(b){ - var width = 0, - cfg; - if(!b){ - Ext.each(buttonNames, function(name){ - buttons[name].hide(); - }); - return width; - } - dlg.footer.dom.style.display = ''; - Ext.iterate(buttons, function(name, btn){ - cfg = b[name]; - if(cfg){ - btn.show(); - btn.setText(Ext.isString(cfg) ? cfg : Ext.MessageBox.buttonText[name]); - width += btn.getEl().getWidth() + 15; - }else{ - btn.hide(); - } - }); - return width; - }; - - return { - /** - * Returns a reference to the underlying {@link Ext.Window} element - * @return {Ext.Window} The window - */ - getDialog : function(titleText){ - if(!dlg){ - var btns = []; - - buttons = {}; - Ext.each(buttonNames, function(name){ - btns.push(buttons[name] = new Ext.Button({ - text: this.buttonText[name], - handler: handleButton.createCallback(name), - hideMode: 'offsets' - })); - }, this); - dlg = new Ext.Window({ - autoCreate : true, - title:titleText, - resizable:false, - constrain:true, - constrainHeader:true, - minimizable : false, - maximizable : false, - stateful: false, - modal: true, - shim:true, - buttonAlign:"center", - width:400, - height:100, - minHeight: 80, - plain:true, - footer:true, - closable:true, - close : function(){ - if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){ - handleButton("no"); - }else{ - handleButton("cancel"); - } - }, - fbar: new Ext.Toolbar({ - items: btns, - enableOverflow: false - }) - }); - dlg.render(document.body); - dlg.getEl().addClass('x-window-dlg'); - mask = dlg.mask; - bodyEl = dlg.body.createChild({ - html:'-// 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, - animEl: 'elId', - icon: Ext.MessageBox.QUESTION -}); -' - }); - iconEl = Ext.get(bodyEl.dom.firstChild); - var contentEl = bodyEl.dom.childNodes[1]; - msgEl = Ext.get(contentEl.firstChild); - textboxEl = Ext.get(contentEl.childNodes[2].firstChild); - textboxEl.enableDisplayMode(); - textboxEl.addKeyListener([10,13], function(){ - if(dlg.isVisible() && opt && opt.buttons){ - if(opt.buttons.ok){ - handleButton("ok"); - }else if(opt.buttons.yes){ - handleButton("yes"); - } - } - }); - textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]); - textareaEl.enableDisplayMode(); - progressBar = new Ext.ProgressBar({ - renderTo:bodyEl - }); - bodyEl.createChild({cls:'x-clear'}); - } - return dlg; - }, - - /** - * Updates the message box body text - * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to - * the XHTML-compliant non-breaking space character ' ') - * @return {Ext.MessageBox} this - */ - updateText : function(text){ - if(!dlg.isVisible() && !opt.width){ - dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows - } - msgEl.update(text || ' '); - - var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0; - var mw = msgEl.getWidth() + msgEl.getMargins('lr'); - var fw = dlg.getFrameWidth('lr'); - var bw = dlg.body.getFrameWidth('lr'); - if (Ext.isIE && iw > 0){ - //3 pixels get subtracted in the icon CSS for an IE margin issue, - //so we have to add it back here for the overall width to be consistent - iw += 3; - } - var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, this.maxWidth), - Math.max(opt.minWidth || this.minWidth, bwidth || 0)); - - if(opt.prompt === true){ - activeTextEl.setWidth(w-iw-fw-bw); - } - if(opt.progress === true || opt.wait === true){ - progressBar.setSize(w-iw-fw-bw); - } - if(Ext.isIE && w == bwidth){ - w += 4; //Add offset when the content width is smaller than the buttons. - } - dlg.setSize(w, 'auto').center(); - return this; - }, - - /** - * Updates a progress-style message box's text and progress bar. Only relevant on message boxes - * initiated via {@link Ext.MessageBox#progress} or {@link Ext.MessageBox#wait}, - * or by calling {@link Ext.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 - * so that any existing body text will not get overwritten by default unless a new value is passed in) - * @return {Ext.MessageBox} this - */ - updateProgress : function(value, progressText, msg){ - progressBar.updateProgress(value, progressText); - if(msg){ - this.updateText(msg); - } - return this; - }, - - /** - * Returns true if the message box is currently displayed - * @return {Boolean} True if the message box is visible, else false - */ - isVisible : function(){ - return dlg && dlg.isVisible(); - }, - - /** - * Hides the message box if it is displayed - * @return {Ext.MessageBox} this - */ - hide : function(){ - var proxy = dlg ? dlg.activeGhost : null; - if(this.isVisible() || proxy){ - dlg.hide(); - handleHide(); - if (proxy){ - // unghost is a private function, but i saw no better solution - // to fix the locking problem when dragging while it closes - dlg.unghost(false, false); - } - } - return this; - }, - - /** - * 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. - * @param {Object} config The following config options are supported:
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:
-Ext.Msg.show({
- title: 'Address',
- msg: 'Please enter your address:',
- width: 300,
- buttons: Ext.MessageBox.OKCANCEL,
- multiline: true,
- fn: saveAddress,
- animEl: 'addAddressBtn',
- icon: Ext.MessageBox.INFO
-});
--Ext.MessageBox.INFO -Ext.MessageBox.WARNING -Ext.MessageBox.QUESTION -Ext.MessageBox.ERROR - *- * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon - * @return {Ext.MessageBox} this - */ - setIcon : function(icon){ - if(!dlg){ - bufferIcon = icon; - return; - } - bufferIcon = undefined; - if(icon && icon != ''){ - iconEl.removeClass('x-hidden'); - iconEl.replaceClass(iconCls, icon); - bodyEl.addClass('x-dlg-icon'); - iconCls = icon; - }else{ - iconEl.replaceClass(iconCls, 'x-hidden'); - bodyEl.removeClass('x-dlg-icon'); - iconCls = ''; - } - return this; - }, - - /** - * 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.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 '') - * @return {Ext.MessageBox} this - */ - progress : function(title, msg, progressText){ - this.show({ - title : title, - msg : msg, - buttons: false, - progress:true, - closable:false, - minWidth: this.minProgressWidth, - progressText: progressText - }); - return this; - }, - - /** - * 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 - * @return {Ext.MessageBox} this - */ - wait : function(msg, title, config){ - this.show({ - title : title, - msg : msg, - buttons: false, - closable:false, - wait:true, - modal:true, - minWidth: this.minProgressWidth, - waitConfig: config - }); - return this; - }, - - /** - * 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). - * @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.
- * @return {Ext.MessageBox} this
- */
- alert : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OK,
- fn: fn,
- scope : scope
- });
- return this;
- },
-
- /**
- * 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).
- * @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.
- * @return {Ext.MessageBox} this
- */
- confirm : function(title, msg, fn, scope){
- this.show({
- title : title,
- msg : msg,
- buttons: this.YESNO,
- fn: fn,
- scope : scope,
- icon: this.QUESTION
- });
- return this;
- },
-
- /**
- * 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 (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 '')
- * @return {Ext.MessageBox} this
- */
- prompt : function(title, msg, fn, scope, multiline, value){
- this.show({
- title : title,
- msg : msg,
- buttons: this.OKCANCEL,
- fn: fn,
- minWidth:250,
- scope : scope,
- prompt:true,
- multiline: multiline,
- value: value
- });
- return this;
- },
-
- /**
- * Button config that displays a single OK button
- * @type Object
- */
- OK : {ok:true},
- /**
- * Button config that displays a single Cancel button
- * @type Object
- */
- CANCEL : {cancel:true},
- /**
- * Button config that displays OK and Cancel buttons
- * @type Object
- */
- OKCANCEL : {ok:true, cancel:true},
- /**
- * Button config that displays Yes and No buttons
- * @type Object
- */
- YESNO : {yes:true, no:true},
- /**
- * Button config that displays Yes, No and Cancel buttons
- * @type Object
- */
- YESNOCANCEL : {yes:true, no:true, cancel:true},
- /**
- * The CSS class that provides the INFO icon image
- * @type String
- */
- INFO : 'ext-mb-info',
- /**
- * The CSS class that provides the WARNING icon image
- * @type String
- */
- WARNING : 'ext-mb-warning',
- /**
- * The CSS class that provides the QUESTION icon image
- * @type String
- */
- QUESTION : 'ext-mb-question',
- /**
- * The CSS class that provides the ERROR icon image
- * @type String
- */
- ERROR : 'ext-mb-error',
-
- /**
- * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
- * @type Number
- */
- defaultTextHeight : 75,
- /**
- * The maximum width in pixels of the message box (defaults to 600)
- * @type Number
- */
- maxWidth : 600,
- /**
- * The minimum width in pixels of the message box (defaults to 100)
- * @type Number
- */
- minWidth : 100,
- /**
- * 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)
- * @type Number
- */
- minProgressWidth : 250,
- /**
- * 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.MessageBox.buttonText.yes = "oui"; //french
- * @type Object
- */
- buttonText : {
- ok : "OK",
- cancel : "Cancel",
- yes : "Yes",
- no : "No"
- }
- };
-}();
-
-/**
- * Shorthand for {@link Ext.MessageBox}
- */
-Ext.Msg = Ext.MessageBox;
-
-
\ No newline at end of file
+\ No newline at end of file/** + * @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 + */ +Ext.define('Ext.window.MessageBox', { + extend: 'Ext.window.Window', + + requires: [ + 'Ext.toolbar.Toolbar', + 'Ext.form.field.Text', + 'Ext.form.field.TextArea', + 'Ext.button.Button', + 'Ext.layout.container.Anchor', + 'Ext.layout.container.HBox', + 'Ext.ProgressBar' + ], + + alternateClassName: 'Ext.MessageBox', + + alias: 'widget.messagebox', + + /** + * Button config that displays a single OK button + * @type Number + */ + OK : 1, + /** + * Button config that displays a single Yes button + * @type Number + */ + YES : 2, + /** + * Button config that displays a single No button + * @type Number + */ + NO : 4, + /** + * Button config that displays a single Cancel button + * @type Number + */ + CANCEL : 8, + /** + * Button config that displays OK and Cancel buttons + * @type Number + */ + OKCANCEL : 9, + /** + * Button config that displays Yes and No buttons + * @type Number + */ + YESNO : 6, + /** + * Button config that displays Yes, No and Cancel buttons + * @type Number + */ + YESNOCANCEL : 14, + /** + * The CSS class that provides the INFO icon image + * @type String + */ + INFO : 'ext-mb-info', + /** + * The CSS class that provides the WARNING icon image + * @type String + */ + WARNING : 'ext-mb-warning', + /** + * The CSS class that provides the QUESTION icon image + * @type String + */ + QUESTION : 'ext-mb-question', + /** + * The CSS class that provides the ERROR icon image + * @type String + */ + ERROR : 'ext-mb-error', + + // hide it by offsets. Windows are hidden on render by default. + hideMode: 'offsets', + closeAction: 'hide', + resizable: false, + title: ' ', + + width: 600, + height: 500, + minWidth: 250, + maxWidth: 600, + minHeight: 110, + maxHeight: 500, + constrain: true, + + cls: Ext.baseCSSPrefix + 'message-box', + + layout: { + type: 'anchor' + }, + + /** + * The default height in pixels of the message box's multiline textarea if displayed (defaults to 75) + * @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). + * @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). + * @type Number + */ + minPromptWidth: 250, + * 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 + * @type Object + */ + buttonText: { + ok: 'OK', + yes: 'Yes', + no: 'No', + cancel: 'Cancel' + }, + + buttonIds: [ + 'ok', 'yes', 'no', 'cancel' + ], + + titleText: { + confirm: 'Confirm', + prompt: 'Prompt', + wait: 'Loading...', + alert: 'Attention' + }, + + iconHeight: 35, + + makeButton: function(btnIdx) { + var btnId = this.buttonIds[btnIdx]; + return Ext.create('Ext.button.Button', { + handler: this.btnCallback, + itemId: btnId, + scope: this, + text: this.buttonText[btnId], + minWidth: 75 + }); + }, + + btnCallback: function(btn) { + 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(); + } + + // Important not to have focus remain in the hidden Window; Interferes with DnD. + btn.blur(); + me.hide(); + me.userCallback(btn.itemId, value, me.cfg); + }, + + hide: function() { + var me = this; + me.dd.endDrag(); + me.progressBar.reset(); + me.removeCls(me.cfg.cls); + me.callParent(); + }, + + initComponent: function() { + var me = this, + i, button; + + me.title = ' '; + + me.topContainer = Ext.create('Ext.container.Container', { + anchor: '100%', + style: { + padding: '10px', + overflow: 'hidden' + }, + items: [ + me.iconComponent = Ext.create('Ext.Component', { + cls: 'ext-mb-icon', + width: 50, + height: me.iconHeight, + style: { + 'float': 'left' + } + }), + me.promptContainer = Ext.create('Ext.container.Container', { + layout: { + type: 'anchor' + }, + items: [ + me.msg = Ext.create('Ext.Component', { + autoEl: { tag: 'span' }, + cls: 'ext-mb-text' + }), + me.textField = Ext.create('Ext.form.field.Text', { + anchor: '100%', + enableKeyEvents: true, + listeners: { + keydown: me.onPromptKey, + scope: me + } + }), + me.textArea = Ext.create('Ext.form.field.TextArea', { + anchor: '100%', + height: 75 + }) + ] + }) + ] + }); + me.progressBar = Ext.create('Ext.ProgressBar', { + anchor: '-10', + style: 'margin-left:10px' + }); + + 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 = Ext.create('Ext.toolbar.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.callParent(); + }, + + 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.ok.handler.call(me, me.msgButtons.ok); + } else if (me.msgButtons.yes.isVisible()) { + me.msgButtons.yes.handler.call(me, me.msgButtons.yes); + blur = true; + } + + if (blur) { + me.textField.blur(); + } + } + }, + + reconfigure: function(cfg) { + var me = this, + buttons = cfg.buttons || 0, + hideToolbar = true, + initialWidth = me.maxWidth, + i; + + cfg = cfg || {}; + me.cfg = cfg; + if (cfg.width) { + initialWidth = cfg.width; + } + + // Default to allowing the Window to take focus. + delete me.defaultFocus; + + // clear any old animateTarget + me.animateTarget = cfg.animateTarget || undefined; + + // Defaults to modal + me.modal = cfg.modal !== false; + + // Show the title + if (cfg.title) { + me.setTitle(cfg.title||' '); + } + + if (!me.rendered) { + me.width = initialWidth; + me.render(Ext.getBody()); + } else { + 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(); + } + + // Hide or show the header + if (!cfg.title && !me.closable) { + 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); + + // Hide or show the message area + if (cfg.msg) { + me.msg.update(cfg.msg); + me.msg.show(); + } else { + me.msg.hide(); + } + + // Hide or show the input field + if (cfg.prompt || cfg.multiline) { + me.multiline = cfg.multiline; + if (cfg.multiline) { + me.textArea.setValue(cfg.value); + me.textArea.setHeight(cfg.defaultTextHeight || me.defaultTextHeight); + me.textArea.show(); + me.textField.hide(); + me.defaultFocus = me.textArea; + } else { + me.textField.setValue(cfg.value); + me.textArea.hide(); + me.textField.show(); + me.defaultFocus = me.textField; + } + } else { + me.textArea.hide(); + me.textField.hide(); + } + + // Hide or show the progress bar + if (cfg.progress || cfg.wait) { + me.progressBar.show(); + me.updateProgress(0, cfg.progressText); + if(cfg.wait === true){ + me.progressBar.wait(cfg.waitConfig); + } + } else { + me.progressBar.hide(); + } + + // Hide or show buttons depending on flag value sent. + 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 = me.msgButtons[i]; + } + me.msgButtons[i].show(); + hideToolbar = false; + } else { + me.msgButtons[i].hide(); + } + } + + // Hide toolbar if no buttons to show + if (hideToolbar) { + me.bottomTb.hide(); + } else { + me.bottomTb.show(); + } + me.hidden = true; + }, + + /** + * 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. + * @param {Object} config The following config options are supported: <ul> + * <li><b>animateTarget</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it + * opens and closes (defaults to undefined)</div></li> + * <li><b>buttons</b> : Number<div class="sub-desc">A bitwise button specifier consisting of the sum of any of the following constants:<ul> + * <li>Ext.window.MessageBox.OK</li> + * <li>Ext.window.MessageBox.YES</li> + * <li>Ext.window.MessageBox.NO</li> + * <li>Ext.window.MessageBox.CANCEL</li> + * </ul>Or false to not show any buttons (defaults to false)</div></li> + * <li><b>closable</b> : Boolean<div class="sub-desc">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.</div></li> + * <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li> + * <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea + * if displayed (defaults to 75)</div></li> + * <li><b>fn</b> : Function<div class="sub-desc">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. + * <p>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:<ul> + * <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul> + * <li><tt>ok</tt></li> + * <li><tt>yes</tt></li> + * <li><tt>no</tt></li> + * <li><tt>cancel</tt></li> + * </ul></div></div></li> + * <li><b>text</b> : String<div class="sub-desc">Value of the input field if either <tt><a href="#show-option-prompt" ext:member="show-option-prompt" ext:cls="Ext.window.MessageBox">prompt</a></tt> + * or <tt><a href="#show-option-multiline" ext:member="show-option-multiline" ext:cls="Ext.window.MessageBox">multiline</a></tt> is true</div></li> + * <li><b>opt</b> : Object<div class="sub-desc">The config object passed to show.</div></li> + * </ul></p></div></li> + * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code>this</code> reference) in which the function will be executed.</div></li> + * <li><b>icon</b> : String<div class="sub-desc">A CSS class that provides a background image to be used as the body icon for the + * dialog (e.g. Ext.window.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li> + * <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.window.Window#iconCls} to + * add an optional header icon (defaults to '')</div></li> + * <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li> + * <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li> + * <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is + * displayed (defaults to true)</div></li> + * <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the + * XHTML-compliant non-breaking space character '&#160;')</div></li> + * <li><a id="show-option-multiline"></a><b>multiline</b> : Boolean<div class="sub-desc"> + * True to prompt the user to enter multi-line text (defaults to false)</div></li> + * <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li> + * <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li> + * <li><a id="show-option-prompt"></a><b>prompt</b> : Boolean<div class="sub-desc">True to prompt the user to enter single-line text (defaults to false)</div></li> + * <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li> + * <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>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li> + * </ul> + * Example usage: + * <pre><code> +Ext.Msg.show({ +title: 'Address', +msg: 'Please enter your address:', +width: 300, +buttons: Ext.window.MessageBox.OKCANCEL, +multiline: true, +fn: saveAddress, +animateTarget: 'addAddressBtn', +icon: Ext.window.MessageBox.INFO +}); +</code></pre> + * @return {Ext.window.MessageBox} this + */ + show: function(cfg) { + var me = this; + + me.reconfigure(cfg); + me.addCls(cfg.cls); + if (cfg.animateTarget) { + me.doAutoSize(false); + me.callParent(); + } else { + me.callParent(); + me.doAutoSize(true); + } + return me; + }, + + afterShow: function(){ + if (this.animateTarget) { + this.center(); + } + this.callParent(arguments); + }, + + doAutoSize: function(center) { + var me = this, + icon = me.iconComponent, + iconHeight = me.iconHeight; + + if (!Ext.isDefined(me.frameWidth)) { + me.frameWidth = me.el.getWidth() - me.body.getWidth(); + } + + // reset to the original dimensions + icon.setHeight(iconHeight); + + // Allow per-invocation override of minWidth + me.minWidth = me.cfg.minWidth || Ext.getClass(this).prototype.minWidth; + + // Set best possible size based upon allowing the text to wrap in the maximized Window, and + // then constraining it to within the max with. Then adding up constituent element heights. + me.topContainer.doLayout(); + if (Ext.isIE6 || Ext.isIEQuirks) { + // In IE quirks, the initial full width of the prompt fields will prevent the container element + // from collapsing once sized down, so temporarily force them to a small width. They'll get + // layed out to their final width later when setting the final window size. + me.textField.setCalculatedSize(9); + me.textArea.setCalculatedSize(9); + } + var width = me.cfg.width || me.msg.getWidth() + icon.getWidth() + 25, /* topContainer's layout padding */ + height = (me.header.rendered ? me.header.getHeight() : 0) + + Math.max(me.promptContainer.getHeight(), icon.getHeight()) + + me.progressBar.getHeight() + + (me.bottomTb.rendered ? me.bottomTb.getHeight() : 0) + 20 ;/* topContainer's layout padding */ + + // Update to the size of the content, this way the text won't wrap under the icon. + icon.setHeight(Math.max(iconHeight, me.msg.getHeight())); + me.setSize(width + me.frameWidth, height + me.frameWidth); + if (center) { + me.center(); + } + return me; + }, + + updateText: function(text) { + this.msg.update(text); + return this.doAutoSize(true); + }, + + /** + * 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. + * The following built-in icon classes are supported, but you can also pass in a custom class name: + * <pre> +Ext.window.MessageBox.INFO +Ext.window.MessageBox.WARNING +Ext.window.MessageBox.QUESTION +Ext.window.MessageBox.ERROR + *</pre> + * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon + * @return {Ext.window.MessageBox} this + */ + setIcon : function(icon) { + var me = this; + me.iconComponent.removeCls(me.iconCls); + if (icon) { + me.iconComponent.show(); + me.iconComponent.addCls(Ext.baseCSSPrefix + 'dlg-icon'); + me.iconComponent.addCls(me.iconCls = icon); + } else { + me.iconComponent.removeCls(Ext.baseCSSPrefix + 'dlg-icon'); + me.iconComponent.hide(); + } + return me; + }, + + /** + * 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 + * 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; + }, + + onEsc: function() { + if (this.closable !== false) { + this.callParent(arguments); + } + }, + + /** + * 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). + * @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. + * @return {Ext.window.MessageBox} this + */ + confirm: function(cfg, msg, fn, scope) { + if (Ext.isString(cfg)) { + cfg = { + title: cfg, + icon: 'ext-mb-question', + msg: msg, + buttons: this.YESNO, + callback: fn, + scope: scope + }; + } + return this.show(cfg); + }, + + /** + * 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 '') + * @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); + }, + + /** + * 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 + * @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); + }, + + /** + * 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). + * @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. + * @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); + }, + + /** + * 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 '') + * @return {Ext.window.MessageBox} this + */ + progress : function(cfg, msg, progressText){ + if (Ext.isString(cfg)) { + cfg = { + title: cfg, + msg: msg, + progressText: progressText + }; + } + return this.show(cfg); + } +}, function() { + Ext.MessageBox = Ext.Msg = new this(); +});