/** + + + +The source code + + + + +/*! + * 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 @@ -37,12 +44,14 @@ Ext.Msg.show({ * @singleton */ Ext.MessageBox = function(){ - var dlg, opt, mask, waitTimer; - var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl; - var buttons, activeTextEl, bwidth, iconCls = ''; + 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(); @@ -55,7 +64,7 @@ Ext.MessageBox = function(){ if(opt && opt.cls){ dlg.el.removeClass(opt.cls); } - progressBar.reset(); + progressBar.reset(); }; // private @@ -71,26 +80,25 @@ Ext.MessageBox = function(){ // private var updateButtons = function(b){ - var width = 0; + var width = 0, + cfg; if(!b){ - buttons['ok'].hide(); - buttons['cancel'].hide(); - buttons['yes'].hide(); - buttons['no'].hide(); + Ext.each(buttonNames, function(name){ + buttons[name].hide(); + }); return width; } dlg.footer.dom.style.display = ''; - for(var k in buttons){ - if(typeof buttons[k] != 'function'){ - if(b[k]){ - buttons[k].show(); - buttons[k].setText(typeof b[k] == 'string' ? b[k] : Ext.MessageBox.buttonText[k]); - width += buttons[k].el.getWidth()+15; - }else{ - buttons[k].hide(); - } + 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; }; @@ -101,6 +109,16 @@ Ext.MessageBox = function(){ */ 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, @@ -112,7 +130,7 @@ Ext.MessageBox = function(){ stateful: false, modal: true, shim:true, - buttonAlign:'center', + buttonAlign:"center", width:400, height:100, minHeight: 80, @@ -121,20 +139,16 @@ Ext.MessageBox = function(){ closable:true, close : function(){ if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){ - handleButton('no'); + handleButton("no"); }else{ - handleButton('cancel'); + handleButton("cancel"); } - } + }, + fbar: new Ext.Toolbar({ + items: btns, + enableOverflow: false + }) }); - 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; @@ -149,9 +163,9 @@ Ext.MessageBox = function(){ textboxEl.addKeyListener([10,13], function(){ if(dlg.isVisible() && opt && opt.buttons){ if(opt.buttons.ok){ - handleButton('ok'); + handleButton("ok"); }else if(opt.buttons.yes){ - handleButton('yes'); + handleButton("yes"); } } }); @@ -175,19 +189,17 @@ Ext.MessageBox = function(){ if(!dlg.isVisible() && !opt.width){ dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows } - msgEl.update(text || ' '); + // Append a space here for sizing. In IE, for some reason, it wraps text incorrectly without one in some cases + msgEl.update(text ? 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)); + var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0, + mw = msgEl.getWidth() + msgEl.getMargins('lr'), + fw = dlg.getFrameWidth('lr'), + bw = dlg.body.getFrameWidth('lr'), + w; + + w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth), + Math.max(opt.minWidth || this.minWidth, bwidth || 0)); if(opt.prompt === true){ activeTextEl.setWidth(w-iw-fw-bw); @@ -198,6 +210,7 @@ Ext.MessageBox = function(){ if(Ext.isIE && w == bwidth){ w += 4; //Add offset when the content width is smaller than the buttons. } + msgEl.update(text || ' '); dlg.setSize(w, 'auto').center(); return this; }, @@ -259,6 +272,8 @@ Ext.MessageBox = function(){ * progress and wait dialogs will ignore this property and always hide the close button as they can only * be closed programmatically. *
prompt is true, instead of prompting the user with a single line textbox,
- * specify multiline = true to prompt the user with a multiline textarea
- * using the {@link #defaultTextHeight} property, or specify a height in pixels
- * to create the textarea (defaults to false creating a single-line textbox)
Ext.MessageBox.INFO
Ext.MessageBox.WARNING
@@ -408,6 +418,11 @@ Ext.MessageBox.ERROR
* @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);
@@ -474,7 +489,7 @@ Ext.MessageBox.ERROR
* @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 {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){
@@ -483,7 +498,8 @@ Ext.MessageBox.ERROR
msg : msg,
buttons: this.OK,
fn: fn,
- scope : scope
+ scope : scope,
+ minWidth: this.minWidth
});
return this;
},
@@ -496,7 +512,7 @@ Ext.MessageBox.ERROR
* @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 {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){
@@ -506,7 +522,8 @@ Ext.MessageBox.ERROR
buttons: this.YESNO,
fn: fn,
scope : scope,
- icon: this.QUESTION
+ icon: this.QUESTION,
+ minWidth: this.minWidth
});
return this;
},
@@ -519,7 +536,7 @@ Ext.MessageBox.ERROR
* @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 {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 '')
@@ -531,7 +548,7 @@ Ext.MessageBox.ERROR
msg : msg,
buttons: this.OKCANCEL,
fn: fn,
- minWidth:250,
+ minWidth: this.minPromptWidth,
scope : scope,
prompt:true,
multiline: multiline,
@@ -597,28 +614,34 @@ Ext.MessageBox.ERROR
*/
maxWidth : 600,
/**
- * The minimum width in pixels of the message box (defaults to 110)
+ * The minimum width in pixels of the message box (defaults to 100)
* @type Number
*/
- minWidth : 110,
+ 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)
+ * 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
+ * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
* @type Object
*/
buttonText : {
- ok : 'OK',
- cancel : 'Cancel',
- yes : 'Yes',
- no : 'No'
+ ok : "OK",
+ cancel : "Cancel",
+ yes : "Yes",
+ no : "No"
}
};
}();
@@ -626,6 +649,6 @@ Ext.MessageBox.ERROR
/**
* Shorthand for {@link Ext.MessageBox}
*/
-Ext.Msg = Ext.MessageBox;
-
+Ext.Msg = Ext.MessageBox;
+
\ No newline at end of file