486 lines
No EOL
19 KiB
JavaScript
486 lines
No EOL
19 KiB
JavaScript
/*
|
|
* Ext JS Library 1.0.1
|
|
* Copyright(c) 2006-2007, Ext JS, LLC.
|
|
* licensing@extjs.com
|
|
*
|
|
* http://www.extjs.com/license
|
|
*/
|
|
|
|
/**
|
|
* @class Ext.MessageBox
|
|
* Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.
|
|
* Example usage:
|
|
*<pre><code>
|
|
// Basic alert:
|
|
Ext.Msg.alert('Status', 'Changes saved successfully.');
|
|
|
|
// Prompt for user data:
|
|
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
|
|
if (btn == 'ok'){
|
|
// process text value...
|
|
}
|
|
});
|
|
|
|
// Show a dialog using config options:
|
|
Ext.Msg.show({
|
|
title:'Save Changes?',
|
|
msg: 'Your are closing a tab that has unsaved changes. Would you like to save your changes?',
|
|
buttons: Ext.Msg.YESNOCANCEL,
|
|
fn: processResult,
|
|
animEl: 'elId'
|
|
});
|
|
</code></pre>
|
|
* @singleton
|
|
*/
|
|
Ext.MessageBox = function(){
|
|
var dlg, opt, mask, waitTimer;
|
|
var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
|
|
var buttons, activeTextEl, bwidth;
|
|
|
|
// private
|
|
var handleButton = function(button){
|
|
dlg.hide();
|
|
Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
|
|
};
|
|
|
|
// private
|
|
var handleHide = function(){
|
|
if(opt && opt.cls){
|
|
dlg.el.removeClass(opt.cls);
|
|
}
|
|
if(waitTimer){
|
|
Ext.TaskMgr.stop(waitTimer);
|
|
waitTimer = null;
|
|
}
|
|
};
|
|
|
|
// private
|
|
var updateButtons = function(b){
|
|
var width = 0;
|
|
if(!b){
|
|
buttons["ok"].hide();
|
|
buttons["cancel"].hide();
|
|
buttons["yes"].hide();
|
|
buttons["no"].hide();
|
|
dlg.footer.dom.style.display = 'none';
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
return width;
|
|
};
|
|
|
|
// private
|
|
var handleEsc = function(d, k, e){
|
|
if(opt && opt.closable !== false){
|
|
dlg.hide();
|
|
}
|
|
if(e){
|
|
e.stopEvent();
|
|
}
|
|
};
|
|
|
|
return {
|
|
/**
|
|
* Returns a reference to the underlying {@link Ext.BasicDialog} element
|
|
* @return {Ext.BasicDialog} dialog The BasicDialog element
|
|
*/
|
|
getDialog : function(){
|
|
if(!dlg){
|
|
dlg = new Ext.BasicDialog("x-msg-box", {
|
|
autoCreate : true,
|
|
shadow: true,
|
|
draggable: true,
|
|
resizable:false,
|
|
constraintoviewport:false,
|
|
fixedcenter:true,
|
|
collapsible : false,
|
|
shim:true,
|
|
modal: true,
|
|
width:400, height:100,
|
|
buttonAlign:"center",
|
|
closeClick : function(){
|
|
if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
|
|
handleButton("no");
|
|
}else{
|
|
handleButton("cancel");
|
|
}
|
|
}
|
|
});
|
|
dlg.on("hide", handleHide);
|
|
mask = dlg.mask;
|
|
dlg.addKeyListener(27, handleEsc);
|
|
buttons = {};
|
|
var bt = this.buttonText;
|
|
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"));
|
|
bodyEl = dlg.body.createChild({
|
|
tag:"div",
|
|
html:'<span class="ext-mb-text"></span><br /><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea><div class="ext-mb-progress-wrap"><div class="ext-mb-progress"><div class="ext-mb-progress-bar"> </div></div></div>'
|
|
});
|
|
msgEl = bodyEl.dom.firstChild;
|
|
textboxEl = Ext.get(bodyEl.dom.childNodes[2]);
|
|
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(bodyEl.dom.childNodes[3]);
|
|
textareaEl.enableDisplayMode();
|
|
progressEl = Ext.get(bodyEl.dom.childNodes[4]);
|
|
progressEl.enableDisplayMode();
|
|
var pf = progressEl.dom.firstChild;
|
|
pp = Ext.get(pf.firstChild);
|
|
pp.setHeight(pf.offsetHeight);
|
|
}
|
|
return dlg;
|
|
},
|
|
|
|
/**
|
|
* Updates the message box body text
|
|
* @param {String} text Replaces the message box element's innerHTML with the specified string (defaults to
|
|
* the XHTML-compliant non-breaking space character  )
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
updateText : function(text){
|
|
if(!dlg.isVisible() && !opt.width){
|
|
dlg.resizeTo(this.maxWidth, 100); // resize first so content is never clipped from previous shows
|
|
}
|
|
msgEl.innerHTML = text || ' ';
|
|
var w = Math.max(Math.min(opt.width || msgEl.offsetWidth, this.maxWidth),
|
|
Math.max(opt.minWidth || this.minWidth, bwidth));
|
|
if(opt.prompt){
|
|
activeTextEl.setWidth(w);
|
|
}
|
|
if(dlg.isVisible()){
|
|
dlg.fixedcenter = false;
|
|
}
|
|
dlg.setContentSize(w, bodyEl.getHeight());
|
|
if(dlg.isVisible()){
|
|
dlg.fixedcenter = true;
|
|
}
|
|
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 by calling {@link Ext.MessageBox#show} with progress: true.
|
|
* @param {Number} value Any number between 0 and 1 (e.g., .5)
|
|
* @param {String} text If defined, the message box's body text is replaced with the specified string (defaults to undefined)
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
updateProgress : function(value, text){
|
|
if(text){
|
|
this.updateText(text);
|
|
}
|
|
pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Returns true if the message box is currently displayed
|
|
* @return {Boolean} isVisible True if the message box is visible, else false
|
|
*/
|
|
isVisible : function(){
|
|
return dlg && dlg.isVisible();
|
|
},
|
|
|
|
/**
|
|
* Hides the message box if it is displayed
|
|
*/
|
|
hide : function(){
|
|
if(this.isVisible()){
|
|
dlg.hide();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Displays a new message box, or reinitializes an existing message box, based on the config options
|
|
* passed in. All functions (e.g. prompt, alert, etc) on MessageBox call this function internally.
|
|
* The following config object properties are supported:
|
|
* <pre>
|
|
Property Type Description
|
|
---------- --------------- ----------------------------------------------------------------------
|
|
title String The title text
|
|
closable Boolean False to hide the top-right close box (defaults to true)
|
|
prompt Boolean True to prompt the user to enter single-line text (defaults to false)
|
|
multiline Boolean True to prompt the user to enter multi-line text (defaults to false)
|
|
progress Boolean True to display a progress bar (defaults to false)
|
|
value String The string value to set into the active textbox element if displayed
|
|
buttons Object/Boolean A button config object (e.g., Ext.MessageBox.OKCANCEL or {ok:'Foo',
|
|
cancel:'Bar'}), or false to not show any buttons (defaults to false)
|
|
msg String A string that will replace the existing message box body text (defaults
|
|
to the XHTML-compliant non-breaking space character  )
|
|
cls String A custom CSS class to apply to the message box element
|
|
proxyDrag Boolean True to display a lightweight proxy while dragging (defaults to false)
|
|
modal Boolean False to allow user interaction with the page while the message box is
|
|
displayed (defaults to true)
|
|
</pre>
|
|
*
|
|
* Example usage:
|
|
* <pre><code>
|
|
Ext.Msg.show({
|
|
title: 'Address',
|
|
msg: 'Please enter your address:',
|
|
width: 300,
|
|
buttons: Ext.MessageBox.OKCANCEL,
|
|
multiline: true,
|
|
fn: saveAddress,
|
|
animEl: 'addAddressBtn'
|
|
});
|
|
</code></pre>
|
|
* @param {Object} config Configuration options
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
show : function(options){
|
|
if(this.isVisible()){
|
|
this.hide();
|
|
}
|
|
var d = this.getDialog();
|
|
opt = options;
|
|
d.setTitle(opt.title || " ");
|
|
d.close.setDisplayed(opt.closable !== false);
|
|
activeTextEl = textboxEl;
|
|
opt.prompt = opt.prompt || (opt.multiline ? true : false);
|
|
if(opt.prompt){
|
|
if(opt.multiline){
|
|
textboxEl.hide();
|
|
textareaEl.show();
|
|
textareaEl.setHeight(typeof opt.multiline == "number" ?
|
|
opt.multiline : this.defaultTextHeight);
|
|
activeTextEl = textareaEl;
|
|
}else{
|
|
textboxEl.show();
|
|
textareaEl.hide();
|
|
}
|
|
}else{
|
|
textboxEl.hide();
|
|
textareaEl.hide();
|
|
}
|
|
progressEl.setDisplayed(opt.progress === true);
|
|
this.updateProgress(0);
|
|
activeTextEl.dom.value = opt.value || "";
|
|
if(opt.prompt){
|
|
dlg.setDefaultButton(activeTextEl);
|
|
}else{
|
|
var bs = opt.buttons;
|
|
var db = null;
|
|
if(bs && bs.ok){
|
|
db = buttons["ok"];
|
|
}else if(bs && bs.yes){
|
|
db = buttons["yes"];
|
|
}
|
|
dlg.setDefaultButton(db);
|
|
}
|
|
bwidth = updateButtons(opt.buttons);
|
|
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.animateTarget = null;
|
|
d.show(options.animEl);
|
|
}
|
|
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
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
progress : function(title, msg){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: false,
|
|
progress:true,
|
|
closable:false,
|
|
minWidth: this.minProgressWidth
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Displays a standard read-only message box (comparable to the basic JavaScript alert prompt) with an OK
|
|
* button. 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} messageBox This message box
|
|
*/
|
|
alert : function(title, msg, fn, scope){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: this.OK,
|
|
fn: fn,
|
|
scope : scope
|
|
});
|
|
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
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
wait : function(msg, title){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: false,
|
|
closable:false,
|
|
progress:true,
|
|
modal:true,
|
|
width:300,
|
|
wait:true
|
|
});
|
|
waitTimer = Ext.TaskMgr.start({
|
|
run: function(i){
|
|
Ext.MessageBox.updateProgress(((((i+20)%20)+1)*5)*.01);
|
|
},
|
|
interval: 1000
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Displays a confirmation message box with Yes and No buttons. 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} messageBox This message box
|
|
*/
|
|
confirm : function(title, msg, fn, scope){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: this.YESNO,
|
|
fn: fn,
|
|
scope : scope
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Displays a message box with OK and Cancel buttons prompting the user to enter some text. 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)
|
|
* @return {Ext.MessageBox} messageBox This message box
|
|
*/
|
|
prompt : function(title, msg, fn, scope, multiline){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: this.OKCANCEL,
|
|
fn: fn,
|
|
minWidth:250,
|
|
scope : scope,
|
|
prompt:true,
|
|
multiline: multiline
|
|
});
|
|
return this;
|
|
},
|
|
|
|
/**
|
|
* Button config that displays a single OK button
|
|
* @type Object
|
|
*/
|
|
OK : {ok:true},
|
|
/**
|
|
* Button config that displays Yes and No buttons
|
|
* @type Object
|
|
*/
|
|
YESNO : {yes:true, no:true},
|
|
/**
|
|
* Button config that displays OK and Cancel buttons
|
|
* @type Object
|
|
*/
|
|
OKCANCEL : {ok:true, cancel:true},
|
|
/**
|
|
* Button config that displays Yes, No and Cancel buttons
|
|
* @type Object
|
|
*/
|
|
YESNOCANCEL : {yes:true, no:true, cancel:true},
|
|
|
|
/**
|
|
* 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 progress bar if displayed (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.
|
|
* Customize the default text like so: Ext.MessageBox.buttonText.yes = "Si";
|
|
* @type Object
|
|
*/
|
|
buttonText : {
|
|
ok : "OK",
|
|
cancel : "Cancel",
|
|
yes : "Yes",
|
|
no : "No"
|
|
}
|
|
};
|
|
}();
|
|
|
|
/**
|
|
* Shorthand for {@link Ext.MessageBox}
|
|
*/
|
|
Ext.Msg = Ext.MessageBox; |