3
* Copyright(c) 2006-2008, Ext JS, LLC.
6
* http://extjs.com/license
10
* @class Ext.MessageBox
11
* <p>Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.<p/>
12
* <p>Note that the MessageBox is asynchronous. Unlike a regular JavaScript <code>alert</code> (which will halt
13
* browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code
14
* that should only run <em>after</em> some user feedback from the MessageBox, you must use a callback function
15
* (see the <code>function</code> parameter for {@link #show} for more details).</p>
16
* <p>Example usage:</p>
19
Ext.Msg.alert('Status', 'Changes saved successfully.');
21
// Prompt for user data and process the result using a callback:
22
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
24
// process text value and close...
28
// Show a dialog using config options:
30
title:'Save Changes?',
31
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
32
buttons: Ext.Msg.YESNOCANCEL,
35
icon: Ext.MessageBox.QUESTION
40
Ext.MessageBox = function(){
41
var dlg, opt, mask, waitTimer;
42
var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl;
43
var buttons, activeTextEl, bwidth, iconCls = '';
46
var handleButton = function(button){
49
Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
54
var handleHide = function(){
56
dlg.el.removeClass(opt.cls);
62
var handleEsc = function(d, k, e){
63
if(opt && opt.closable !== false){
72
var updateButtons = function(b){
76
buttons["cancel"].hide();
77
buttons["yes"].hide();
81
dlg.footer.dom.style.display = '';
82
for(var k in buttons){
83
if(typeof buttons[k] != "function"){
86
buttons[k].setText(typeof b[k] == "string" ? b[k] : Ext.MessageBox.buttonText[k]);
87
width += buttons[k].el.getWidth()+15;
98
* Returns a reference to the underlying {@link Ext.Window} element
99
* @return {Ext.Window} The window
101
getDialog : function(titleText){
103
dlg = new Ext.Window({
108
constrainHeader:true,
114
buttonAlign:"center",
122
if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
125
handleButton("cancel");
130
var bt = this.buttonText;
131
//TODO: refactor this block into a buttons config to pass into the Window constructor
132
buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
133
buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
134
buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
135
buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
136
buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets';
137
dlg.render(document.body);
138
dlg.getEl().addClass('x-window-dlg');
140
bodyEl = dlg.body.createChild({
141
html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>'
143
iconEl = Ext.get(bodyEl.dom.firstChild);
144
var contentEl = bodyEl.dom.childNodes[1];
145
msgEl = Ext.get(contentEl.firstChild);
146
textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
147
textboxEl.enableDisplayMode();
148
textboxEl.addKeyListener([10,13], function(){
149
if(dlg.isVisible() && opt && opt.buttons){
152
}else if(opt.buttons.yes){
157
textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
158
textareaEl.enableDisplayMode();
159
progressBar = new Ext.ProgressBar({
162
bodyEl.createChild({cls:'x-clear'});
168
* Updates the message box body text
169
* @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to
170
* the XHTML-compliant non-breaking space character '&#160;')
171
* @return {Ext.MessageBox} this
173
updateText : function(text){
174
if(!dlg.isVisible() && !opt.width){
175
dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows
177
msgEl.update(text || ' ');
179
var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0;
180
var mw = msgEl.getWidth() + msgEl.getMargins('lr');
181
var fw = dlg.getFrameWidth('lr');
182
var bw = dlg.body.getFrameWidth('lr');
183
if (Ext.isIE && iw > 0){
184
//3 pixels get subtracted in the icon CSS for an IE margin issue,
185
//so we have to add it back here for the overall width to be consistent
188
var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, this.maxWidth),
189
Math.max(opt.minWidth || this.minWidth, bwidth || 0));
191
if(opt.prompt === true){
192
activeTextEl.setWidth(w-iw-fw-bw);
194
if(opt.progress === true || opt.wait === true){
195
progressBar.setSize(w-iw-fw-bw);
197
dlg.setSize(w, 'auto').center();
202
* Updates a progress-style message box's text and progress bar. Only relevant on message boxes
203
* initiated via {@link Ext.MessageBox#progress} or by calling {@link Ext.MessageBox#show} with progress: true.
204
* @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0)
205
* @param {String} progressText The progress text to display inside the progress bar (defaults to '')
206
* @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined
207
* so that any existing body text will not get overwritten by default unless a new value is passed in)
208
* @return {Ext.MessageBox} this
210
updateProgress : function(value, progressText, msg){
211
progressBar.updateProgress(value, progressText);
213
this.updateText(msg);
219
* Returns true if the message box is currently displayed
220
* @return {Boolean} True if the message box is visible, else false
222
isVisible : function(){
223
return dlg && dlg.isVisible();
227
* Hides the message box if it is displayed
228
* @return {Ext.MessageBox} this
231
if(this.isVisible()){
239
* Displays a new message box, or reinitializes an existing message box, based on the config options
240
* passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally,
241
* although those calls are basic shortcuts and do not support all of the config options allowed here.
242
* @param {Object} config The following config options are supported: <ul>
243
* <li><b>animEl</b> : String/Element<div class="sub-desc">An id or Element from which the message box should animate as it
244
* opens and closes (defaults to undefined)</div></li>
245
* <li><b>buttons</b> : Object/Boolean<div class="sub-desc">A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
246
* cancel:'Bar'}), or false to not show any buttons (defaults to false)</div></li>
247
* <li><b>closable</b> : Boolean<div class="sub-desc">False to hide the top-right close button (defaults to true). Note that
248
* progress and wait dialogs will ignore this property and always hide the close button as they can only
249
* be closed programmatically.</div></li>
250
* <li><b>cls</b> : String<div class="sub-desc">A custom CSS class to apply to the message box's container element</div></li>
251
* <li><b>defaultTextHeight</b> : Number<div class="sub-desc">The default height in pixels of the message box's multiline textarea
252
* if displayed (defaults to 75)</div></li>
253
* <li><b>fn</b> : Function<div class="sub-desc">A callback function which is called when the dialog is dismissed either
254
* by clicking on the configured buttons, or on the dialog close button, or by pressing
255
* the return button to enter input.
256
* <p>Progress and wait dialogs will ignore this option since they do not respond to user
257
* actions and can only be closed programmatically, so any required function should be called
258
* by the same code after it closes the dialog. Parameters passed:<ul>
259
* <li><b>buttonId</b> : String<div class="sub-desc">The ID of the button pressed, one of:<div class="sub-desc"><ul>
260
* <li><tt>ok</tt></li>
261
* <li><tt>yes</tt></li>
262
* <li><tt>no</tt></li>
263
* <li><tt>cancel</tt></li>
264
* </ul></div></div></li>
265
* <li><b>text</b> : String<div class="sub-desc">Value of the input field if either <tt>{@link #show-option-prompt prompt}</tt>
266
* or <tt>{@link #show-option-multiline multiline}</tt> is true</div></li>
268
* <li><b>scope</b> : Object<div class="sub-desc">The scope of the callback function</div></li>
269
* <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
270
* dialog (e.g. Ext.MessageBox.WARNING or 'custom-class') (defaults to '')</div></li>
271
* <li><b>iconCls</b> : String<div class="sub-desc">The standard {@link Ext.Window#iconCls} to
272
* add an optional header icon (defaults to '')</div></li>
273
* <li><b>maxWidth</b> : Number<div class="sub-desc">The maximum width in pixels of the message box (defaults to 600)</div></li>
274
* <li><b>minWidth</b> : Number<div class="sub-desc">The minimum width in pixels of the message box (defaults to 100)</div></li>
275
* <li><b>modal</b> : Boolean<div class="sub-desc">False to allow user interaction with the page while the message box is
276
* displayed (defaults to true)</div></li>
277
* <li><b>msg</b> : String<div class="sub-desc">A string that will replace the existing message box body text (defaults to the
278
* XHTML-compliant non-breaking space character '&#160;')</div></li>
279
* <a id="show-option-multiline"></a><li><b>multiline</b> : Boolean<div class="sub-desc">
280
* True to prompt the user to enter multi-line text (defaults to false)</div></li>
281
* <li><b>progress</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
282
* <li><b>progressText</b> : String<div class="sub-desc">The text to display inside the progress bar if progress = true (defaults to '')</div></li>
283
* <a id="show-option-prompt"></a><li><b>prompt</b> : Boolean<div class="sub-desc">True to prompt the user to enter single-line text (defaults to false)</div></li>
284
* <li><b>proxyDrag</b> : Boolean<div class="sub-desc">True to display a lightweight proxy while dragging (defaults to false)</div></li>
285
* <li><b>title</b> : String<div class="sub-desc">The title text</div></li>
286
* <li><b>value</b> : String<div class="sub-desc">The string value to set into the active textbox element if displayed</div></li>
287
* <li><b>wait</b> : Boolean<div class="sub-desc">True to display a progress bar (defaults to false)</div></li>
288
* <li><b>waitConfig</b> : Object<div class="sub-desc">A {@link Ext.ProgressBar#waitConfig} object (applies only if wait = true)</div></li>
289
* <li><b>width</b> : Number<div class="sub-desc">The width of the dialog in pixels</div></li>
295
msg: 'Please enter your address:',
297
buttons: Ext.MessageBox.OKCANCEL,
300
animEl: 'addAddressBtn',
301
icon: Ext.MessageBox.INFO
304
* @return {Ext.MessageBox} this
306
show : function(options){
307
if(this.isVisible()){
311
var d = this.getDialog(opt.title || " ");
313
d.setTitle(opt.title || " ");
314
var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true);
315
d.tools.close.setDisplayed(allowClose);
316
activeTextEl = textboxEl;
317
opt.prompt = opt.prompt || (opt.multiline ? true : false);
322
textareaEl.setHeight(typeof opt.multiline == "number" ?
323
opt.multiline : this.defaultTextHeight);
324
activeTextEl = textareaEl;
333
activeTextEl.dom.value = opt.value || "";
335
d.focusEl = activeTextEl;
337
var bs = opt.buttons;
341
}else if(bs && bs.yes){
349
d.setIconClass(opt.iconCls);
351
this.setIcon(opt.icon);
352
bwidth = updateButtons(opt.buttons);
353
progressBar.setVisible(opt.progress === true || opt.wait === true);
354
this.updateProgress(0, opt.progressText);
355
this.updateText(opt.msg);
357
d.el.addClass(opt.cls);
359
d.proxyDrag = opt.proxyDrag === true;
360
d.modal = opt.modal !== false;
361
d.mask = opt.modal !== false ? mask : false;
363
// force it to the end of the z-index stack so it gets a cursor in FF
364
document.body.appendChild(dlg.el.dom);
365
d.setAnimateTarget(opt.animEl);
369
//workaround for window internally enabling keymap in afterShow
370
d.on('show', function(){
371
if(allowClose === true){
376
}, this, {single:true});
378
if(opt.wait === true){
379
progressBar.wait(opt.waitConfig);
385
* Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default
386
* styling, and the class passed in is expected to supply the background image url. Pass in empty string ('')
387
* to clear any existing icon. The following built-in icon classes are supported, but you can also pass
388
* in a custom class name:
391
Ext.MessageBox.WARNING
392
Ext.MessageBox.QUESTION
395
* @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon
396
* @return {Ext.MessageBox} this
398
setIcon : function(icon){
399
if(icon && icon != ''){
400
iconEl.removeClass('x-hidden');
401
iconEl.replaceClass(iconCls, icon);
404
iconEl.replaceClass(iconCls, 'x-hidden');
411
* Displays a message box with a progress bar. This message box has no buttons and is not closeable by
412
* the user. You are responsible for updating the progress bar as needed via {@link Ext.MessageBox#updateProgress}
413
* and closing the message box when the process is complete.
414
* @param {String} title The title bar text
415
* @param {String} msg The message box body text
416
* @param {String} progressText (optional) The text to display inside the progress bar (defaults to '')
417
* @return {Ext.MessageBox} this
419
progress : function(title, msg, progressText){
426
minWidth: this.minProgressWidth,
427
progressText: progressText
433
* Displays a message box with an infinitely auto-updating progress bar. This can be used to block user
434
* interaction while waiting for a long-running process to complete that does not have defined intervals.
435
* You are responsible for closing the message box when the process is complete.
436
* @param {String} msg The message box body text
437
* @param {String} title (optional) The title bar text
438
* @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object
439
* @return {Ext.MessageBox} this
441
wait : function(msg, title, config){
449
minWidth: this.minProgressWidth,
456
* Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt).
457
* If a callback function is passed it will be called after the user clicks the button, and the
458
* id of the button that was clicked will be passed as the only parameter to the callback
459
* (could also be the top-right close button).
460
* @param {String} title The title bar text
461
* @param {String} msg The message box body text
462
* @param {Function} fn (optional) The callback function invoked after the message box is closed
463
* @param {Object} scope (optional) The scope of the callback function
464
* @return {Ext.MessageBox} this
466
alert : function(title, msg, fn, scope){
478
* Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm).
479
* If a callback function is passed it will be called after the user clicks either button,
480
* and the id of the button that was clicked will be passed as the only parameter to the callback
481
* (could also be the top-right close button).
482
* @param {String} title The title bar text
483
* @param {String} msg The message box body text
484
* @param {Function} fn (optional) The callback function invoked after the message box is closed
485
* @param {Object} scope (optional) The scope of the callback function
486
* @return {Ext.MessageBox} this
488
confirm : function(title, msg, fn, scope){
501
* Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt).
502
* The prompt can be a single-line or multi-line textbox. If a callback function is passed it will be called after the user
503
* clicks either button, and the id of the button that was clicked (could also be the top-right
504
* close button) and the text that was entered will be passed as the two parameters to the callback.
505
* @param {String} title The title bar text
506
* @param {String} msg The message box body text
507
* @param {Function} fn (optional) The callback function invoked after the message box is closed
508
* @param {Object} scope (optional) The scope of the callback function
509
* @param {Boolean/Number} multiline (optional) True to create a multiline textbox using the defaultTextHeight
510
* property, or the height in pixels to create the textbox (defaults to false / single-line)
511
* @param {String} value (optional) Default value of the text input element (defaults to '')
512
* @return {Ext.MessageBox} this
514
prompt : function(title, msg, fn, scope, multiline, value){
518
buttons: this.OKCANCEL,
523
multiline: multiline,
530
* Button config that displays a single OK button
535
* Button config that displays a single Cancel button
538
CANCEL : {cancel:true},
540
* Button config that displays OK and Cancel buttons
543
OKCANCEL : {ok:true, cancel:true},
545
* Button config that displays Yes and No buttons
548
YESNO : {yes:true, no:true},
550
* Button config that displays Yes, No and Cancel buttons
553
YESNOCANCEL : {yes:true, no:true, cancel:true},
555
* The CSS class that provides the INFO icon image
558
INFO : 'ext-mb-info',
560
* The CSS class that provides the WARNING icon image
563
WARNING : 'ext-mb-warning',
565
* The CSS class that provides the QUESTION icon image
568
QUESTION : 'ext-mb-question',
570
* The CSS class that provides the ERROR icon image
573
ERROR : 'ext-mb-error',
576
* The default height in pixels of the message box's multiline textarea if displayed (defaults to 75)
579
defaultTextHeight : 75,
581
* The maximum width in pixels of the message box (defaults to 600)
586
* The minimum width in pixels of the message box (defaults to 100)
591
* The minimum width in pixels of the message box if it is a progress-style dialog. This is useful
592
* for setting a different minimum width than text-only dialogs may need (defaults to 250)
595
minProgressWidth : 250,
597
* An object containing the default button text strings that can be overriden for localized language support.
598
* Supported properties are: ok, cancel, yes and no. Generally you should include a locale-specific
599
* resource file for handling language support across the framework.
600
* Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french
613
* Shorthand for {@link Ext.MessageBox}
615
Ext.Msg = Ext.MessageBox;
b'\\ No newline at end of file'