- Replaced color picker form control with a more robust version.
This commit is contained in:
JT Smith
parent
6fe068e42d
commit
6e0470771e
1193 changed files with 342 additions and 223 deletions
486
www/extras/extjs/source/widgets/MessageBox.js
vendored
Normal file
486
www/extras/extjs/source/widgets/MessageBox.js
vendored
Normal file
|
|
@ -0,0 +1,486 @@
|
|||
/*
|
||||
* 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;
|
||||
Loading…
Add table
Add a link
Reference in a new issue