X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/src/widgets/MessageBox.js?ds=sidebyside diff --git a/src/widgets/MessageBox.js b/src/widgets/MessageBox.js index 10c17d6a..3bacf1eb 100644 --- a/src/widgets/MessageBox.js +++ b/src/widgets/MessageBox.js @@ -1,632 +1,644 @@ /*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.3.1 + * Copyright(c) 2006-2010 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license + */ +/** + * @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 the function
parameter for {@link #show} for more details).
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,
+ animEl: 'elId',
+ icon: Ext.MessageBox.QUESTION
+});
+
+ * @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:'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
+});
+
+ * @return {Ext.MessageBox} this
+ */
+ show : function(options){
+ if(this.isVisible()){
+ this.hide();
+ }
+ opt = options;
+ var d = this.getDialog(opt.title || " ");
+
+ d.setTitle(opt.title || " ");
+ var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
+ d.tools.close.setDisplayed(allowClose);
+ activeTextEl = textboxEl;
+ opt.prompt = opt.prompt || (opt.multiline ? true : false);
+ if(opt.prompt){
+ if(opt.multiline){
+ textboxEl.hide();
+ textareaEl.show();
+ textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
+ activeTextEl = textareaEl;
+ }else{
+ textboxEl.show();
+ textareaEl.hide();
+ }
+ }else{
+ textboxEl.hide();
+ textareaEl.hide();
+ }
+ activeTextEl.dom.value = opt.value || "";
+ if(opt.prompt){
+ d.focusEl = activeTextEl;
+ }else{
+ var bs = opt.buttons;
+ var db = null;
+ if(bs && bs.ok){
+ db = buttons["ok"];
+ }else if(bs && bs.yes){
+ db = buttons["yes"];
+ }
+ if (db){
+ d.focusEl = db;
+ }
+ }
+ if(Ext.isDefined(opt.iconCls)){
+ d.setIconClass(opt.iconCls);
+ }
+ this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
+ bwidth = updateButtons(opt.buttons);
+ progressBar.setVisible(opt.progress === true || opt.wait === true);
+ this.updateProgress(0, opt.progressText);
+ this.updateText(opt.msg);
+ if(opt.cls){
+ d.el.addClass(opt.cls);
+ }
+ d.proxyDrag = opt.proxyDrag === true;
+ d.modal = opt.modal !== false;
+ d.mask = opt.modal !== false ? mask : false;
+ if(!d.isVisible()){
+ // force it to the end of the z-index stack so it gets a cursor in FF
+ document.body.appendChild(dlg.el.dom);
+ d.setAnimateTarget(opt.animEl);
+ //workaround for window internally enabling keymap in afterShow
+ d.on('show', function(){
+ if(allowClose === true){
+ d.keyMap.enable();
+ }else{
+ d.keyMap.disable();
+ }
+ }, this, {single:true});
+ d.show(opt.animEl);
+ }
+ if(opt.wait === true){
+ progressBar.wait(opt.waitConfig);
+ }
+ return this;
+ },
+
+ /**
+ * 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:
+ * +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,
+ minWidth: this.minWidth
+ });
+ 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,
+ minWidth: this.minWidth
+ });
+ 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: this.minPromptWidth,
+ 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,
+ /**
+ * 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.MessageBox.buttonText.yes = "oui"; //french
+ * @type Object
+ */
+ buttonText : {
+ ok : "OK",
+ cancel : "Cancel",
+ yes : "Yes",
+ no : "No"
+ }
+ };
+}();
+
+/**
+ * Shorthand for {@link Ext.MessageBox}
*/
-/**
- * @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 the function
parameter for {@link #show} for more details).
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,
- animEl: 'elId',
- icon: Ext.MessageBox.QUESTION
-});
-
- * @singleton
- */
-Ext.MessageBox = function(){
- var dlg, opt, mask, waitTimer,
- bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl,
- buttons, activeTextEl, bwidth, bufferIcon = '', iconCls = '';
-
- // private
- var handleButton = function(button){
- 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;
- if(!b){
- buttons["ok"].hide();
- buttons["cancel"].hide();
- buttons["yes"].hide();
- buttons["no"].hide();
- return width;
- }
- dlg.footer.dom.style.display = '';
- for(var k in buttons){
- if(!Ext.isFunction(buttons[k])){
- if(b[k]){
- buttons[k].show();
- buttons[k].setText(Ext.isString(b[k]) ? b[k] : Ext.MessageBox.buttonText[k]);
- width += buttons[k].el.getWidth()+15;
- }else{
- buttons[k].hide();
- }
- }
- }
- return width;
- };
-
- return {
- /**
- * Returns a reference to the underlying {@link Ext.Window} element
- * @return {Ext.Window} The window
- */
- getDialog : function(titleText){
- if(!dlg){
- 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");
- }
- }
- });
- buttons = {};
- var bt = this.buttonText;
- //TODO: refactor this block into a buttons config to pass into the Window constructor
- buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
- buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
- buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
- buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
- buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets';
- dlg.render(document.body);
- dlg.getEl().addClass('x-window-dlg');
- mask = dlg.mask;
- bodyEl = dlg.body.createChild({
- html:'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
-});
-
- * @return {Ext.MessageBox} this
- */
- show : function(options){
- if(this.isVisible()){
- this.hide();
- }
- opt = options;
- var d = this.getDialog(opt.title || " ");
-
- d.setTitle(opt.title || " ");
- var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
- d.tools.close.setDisplayed(allowClose);
- activeTextEl = textboxEl;
- opt.prompt = opt.prompt || (opt.multiline ? true : false);
- if(opt.prompt){
- if(opt.multiline){
- textboxEl.hide();
- textareaEl.show();
- textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight);
- activeTextEl = textareaEl;
- }else{
- textboxEl.show();
- textareaEl.hide();
- }
- }else{
- textboxEl.hide();
- textareaEl.hide();
- }
- activeTextEl.dom.value = opt.value || "";
- if(opt.prompt){
- d.focusEl = activeTextEl;
- }else{
- var bs = opt.buttons;
- var db = null;
- if(bs && bs.ok){
- db = buttons["ok"];
- }else if(bs && bs.yes){
- db = buttons["yes"];
- }
- if (db){
- d.focusEl = db;
- }
- }
- if(opt.iconCls){
- d.setIconClass(opt.iconCls);
- }
- this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon);
- bwidth = updateButtons(opt.buttons);
- progressBar.setVisible(opt.progress === true || opt.wait === true);
- this.updateProgress(0, opt.progressText);
- this.updateText(opt.msg);
- if(opt.cls){
- d.el.addClass(opt.cls);
- }
- d.proxyDrag = opt.proxyDrag === true;
- d.modal = opt.modal !== false;
- d.mask = opt.modal !== false ? mask : false;
- if(!d.isVisible()){
- // force it to the end of the z-index stack so it gets a cursor in FF
- document.body.appendChild(dlg.el.dom);
- d.setAnimateTarget(opt.animEl);
- d.show(opt.animEl);
- }
-
- //workaround for window internally enabling keymap in afterShow
- d.on('show', function(){
- if(allowClose === true){
- d.keyMap.enable();
- }else{
- d.keyMap.disable();
- }
- }, this, {single:true});
-
- if(opt.wait === true){
- progressBar.wait(opt.waitConfig);
- }
- return this;
- },
-
- /**
- * 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:
- * -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 of the callback function - * @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 of the callback function - * @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 of the callback function - * @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