1241 lines
36 KiB
JavaScript
1241 lines
36 KiB
JavaScript
/*
|
|
* Ext JS Library 1.0.1
|
|
* Copyright(c) 2006-2007, Ext JS, LLC.
|
|
* licensing@extjs.com
|
|
*
|
|
* http://www.extjs.com/license
|
|
*/
|
|
|
|
|
|
Ext.BasicDialog = function(el, config){
|
|
this.el = Ext.get(el);
|
|
var dh = Ext.DomHelper;
|
|
if(!this.el && config && config.autoCreate){
|
|
if(typeof config.autoCreate == "object"){
|
|
if(!config.autoCreate.id){
|
|
config.autoCreate.id = el;
|
|
}
|
|
this.el = dh.append(document.body,
|
|
config.autoCreate, true);
|
|
}else{
|
|
this.el = dh.append(document.body,
|
|
{tag: "div", id: el, style:'visibility:hidden;'}, true);
|
|
}
|
|
}
|
|
el = this.el;
|
|
el.setDisplayed(true);
|
|
el.hide = this.hideAction;
|
|
this.id = el.id;
|
|
el.addClass("x-dlg");
|
|
|
|
Ext.apply(this, config);
|
|
|
|
this.proxy = el.createProxy("x-dlg-proxy");
|
|
this.proxy.hide = this.hideAction;
|
|
this.proxy.setOpacity(.5);
|
|
this.proxy.hide();
|
|
|
|
if(config.width){
|
|
el.setWidth(config.width);
|
|
}
|
|
if(config.height){
|
|
el.setHeight(config.height);
|
|
}
|
|
this.size = el.getSize();
|
|
if(typeof config.x != "undefined" && typeof config.y != "undefined"){
|
|
this.xy = [config.x,config.y];
|
|
}else{
|
|
this.xy = el.getCenterXY(true);
|
|
}
|
|
|
|
this.header = el.child("/.x-dlg-hd");
|
|
|
|
this.body = el.child("/.x-dlg-bd");
|
|
|
|
this.footer = el.child("/.x-dlg-ft");
|
|
|
|
if(!this.header){
|
|
this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
|
|
}
|
|
if(!this.body){
|
|
this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
|
|
}
|
|
|
|
this.header.unselectable();
|
|
if(this.title){
|
|
this.header.update(this.title);
|
|
}
|
|
|
|
this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
|
|
this.focusEl.swallowEvent("click", true);
|
|
|
|
this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
|
|
|
|
|
|
this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
|
|
if(this.footer){
|
|
this.bwrap.dom.appendChild(this.footer.dom);
|
|
}
|
|
|
|
this.bg = this.el.createChild({
|
|
tag: "div", cls:"x-dlg-bg",
|
|
html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
|
|
});
|
|
this.centerBg = this.bg.child("div.x-dlg-bg-center");
|
|
|
|
|
|
if(this.autoScroll !== false && !this.autoTabs){
|
|
this.body.setStyle("overflow", "auto");
|
|
}
|
|
|
|
this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
|
|
|
|
if(this.closable !== false){
|
|
this.el.addClass("x-dlg-closable");
|
|
this.close = this.toolbox.createChild({cls:"x-dlg-close"});
|
|
this.close.on("click", this.closeClick, this);
|
|
this.close.addClassOnOver("x-dlg-close-over");
|
|
}
|
|
if(this.collapsible !== false){
|
|
this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
|
|
this.collapseBtn.on("click", this.collapseClick, this);
|
|
this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
|
|
this.header.on("dblclick", this.collapseClick, this);
|
|
}
|
|
if(this.resizable !== false){
|
|
this.el.addClass("x-dlg-resizable");
|
|
this.resizer = new Ext.Resizable(el, {
|
|
minWidth: this.minWidth || 80,
|
|
minHeight:this.minHeight || 80,
|
|
handles: this.resizeHandles || "all",
|
|
pinned: true
|
|
});
|
|
this.resizer.on("beforeresize", this.beforeResize, this);
|
|
this.resizer.on("resize", this.onResize, this);
|
|
}
|
|
if(this.draggable !== false){
|
|
el.addClass("x-dlg-draggable");
|
|
if (!this.proxyDrag) {
|
|
var dd = new Ext.dd.DD(el.dom.id, "WindowDrag");
|
|
}
|
|
else {
|
|
var dd = new Ext.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
|
|
}
|
|
dd.setHandleElId(this.header.id);
|
|
dd.endDrag = this.endMove.createDelegate(this);
|
|
dd.startDrag = this.startMove.createDelegate(this);
|
|
dd.onDrag = this.onDrag.createDelegate(this);
|
|
dd.scroll = false;
|
|
this.dd = dd;
|
|
}
|
|
if(this.modal){
|
|
this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
|
|
this.mask.enableDisplayMode("block");
|
|
this.mask.hide();
|
|
this.el.addClass("x-dlg-modal");
|
|
}
|
|
if(this.shadow){
|
|
this.shadow = new Ext.Shadow({
|
|
mode : typeof this.shadow == "string" ? this.shadow : "sides",
|
|
offset : this.shadowOffset
|
|
});
|
|
}else{
|
|
this.shadowOffset = 0;
|
|
}
|
|
if(Ext.useShims && this.shim !== false){
|
|
this.shim = this.el.createShim();
|
|
this.shim.hide = this.hideAction;
|
|
this.shim.hide();
|
|
}else{
|
|
this.shim = false;
|
|
}
|
|
if(this.autoTabs){
|
|
this.initTabs();
|
|
}
|
|
this.addEvents({
|
|
|
|
"keydown" : true,
|
|
|
|
"move" : true,
|
|
|
|
"resize" : true,
|
|
|
|
"beforehide" : true,
|
|
|
|
"hide" : true,
|
|
|
|
"beforeshow" : true,
|
|
|
|
"show" : true
|
|
});
|
|
el.on("keydown", this.onKeyDown, this);
|
|
el.on("mousedown", this.toFront, this);
|
|
Ext.EventManager.onWindowResize(this.adjustViewport, this, true);
|
|
this.el.hide();
|
|
Ext.DialogManager.register(this);
|
|
Ext.BasicDialog.superclass.constructor.call(this);
|
|
};
|
|
|
|
Ext.extend(Ext.BasicDialog, Ext.util.Observable, {
|
|
shadowOffset: 5,
|
|
minHeight: 80,
|
|
minWidth: 200,
|
|
minButtonWidth: 75,
|
|
defaultButton: null,
|
|
buttonAlign: "right",
|
|
tabTag: 'div',
|
|
firstShow: true,
|
|
|
|
|
|
setTitle : function(text){
|
|
this.header.update(text);
|
|
return this;
|
|
},
|
|
|
|
|
|
closeClick : function(){
|
|
this.hide();
|
|
},
|
|
|
|
|
|
collapseClick : function(){
|
|
this[this.collapsed ? "expand" : "collapse"]();
|
|
},
|
|
|
|
|
|
collapse : function(){
|
|
if(!this.collapsed){
|
|
this.collapsed = true;
|
|
this.el.addClass("x-dlg-collapsed");
|
|
this.restoreHeight = this.el.getHeight();
|
|
this.resizeTo(this.el.getWidth(), this.header.getHeight());
|
|
}
|
|
},
|
|
|
|
|
|
expand : function(){
|
|
if(this.collapsed){
|
|
this.collapsed = false;
|
|
this.el.removeClass("x-dlg-collapsed");
|
|
this.resizeTo(this.el.getWidth(), this.restoreHeight);
|
|
}
|
|
},
|
|
|
|
|
|
initTabs : function(){
|
|
var tabs = this.getTabs();
|
|
while(tabs.getTab(0)){
|
|
tabs.removeTab(0);
|
|
}
|
|
this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
|
|
var dom = el.dom;
|
|
tabs.addTab(Ext.id(dom), dom.title);
|
|
dom.title = "";
|
|
});
|
|
tabs.activate(0);
|
|
return tabs;
|
|
},
|
|
|
|
|
|
beforeResize : function(){
|
|
this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
|
|
},
|
|
|
|
|
|
onResize : function(){
|
|
this.refreshSize();
|
|
this.syncBodyHeight();
|
|
this.adjustAssets();
|
|
this.focus();
|
|
this.fireEvent("resize", this, this.size.width, this.size.height);
|
|
},
|
|
|
|
|
|
onKeyDown : function(e){
|
|
if(this.isVisible()){
|
|
this.fireEvent("keydown", this, e);
|
|
}
|
|
},
|
|
|
|
|
|
resizeTo : function(width, height){
|
|
this.el.setSize(width, height);
|
|
this.size = {width: width, height: height};
|
|
this.syncBodyHeight();
|
|
if(this.fixedcenter){
|
|
this.center();
|
|
}
|
|
if(this.isVisible()){
|
|
this.constrainXY();
|
|
this.adjustAssets();
|
|
}
|
|
this.fireEvent("resize", this, width, height);
|
|
return this;
|
|
},
|
|
|
|
|
|
|
|
setContentSize : function(w, h){
|
|
h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
|
|
w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
|
|
|
|
h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
|
|
w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
|
|
|
|
if(this.tabs){
|
|
h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
|
|
w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
|
|
}
|
|
this.resizeTo(w, h);
|
|
return this;
|
|
},
|
|
|
|
|
|
addKeyListener : function(key, fn, scope){
|
|
var keyCode, shift, ctrl, alt;
|
|
if(typeof key == "object" && !(key instanceof Array)){
|
|
keyCode = key["key"];
|
|
shift = key["shift"];
|
|
ctrl = key["ctrl"];
|
|
alt = key["alt"];
|
|
}else{
|
|
keyCode = key;
|
|
}
|
|
var handler = function(dlg, e){
|
|
if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
|
|
var k = e.getKey();
|
|
if(keyCode instanceof Array){
|
|
for(var i = 0, len = keyCode.length; i < len; i++){
|
|
if(keyCode[i] == k){
|
|
fn.call(scope || window, dlg, k, e);
|
|
return;
|
|
}
|
|
}
|
|
}else{
|
|
if(k == keyCode){
|
|
fn.call(scope || window, dlg, k, e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.on("keydown", handler);
|
|
return this;
|
|
},
|
|
|
|
|
|
getTabs : function(){
|
|
if(!this.tabs){
|
|
this.el.addClass("x-dlg-auto-tabs");
|
|
this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
|
|
this.tabs = new Ext.TabPanel(this.body.dom, this.tabPosition == "bottom");
|
|
}
|
|
return this.tabs;
|
|
},
|
|
|
|
|
|
addButton : function(config, handler, scope){
|
|
var dh = Ext.DomHelper;
|
|
if(!this.footer){
|
|
this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
|
|
}
|
|
if(!this.btnContainer){
|
|
var tb = this.footer.createChild({
|
|
tag:"div",
|
|
cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
|
|
html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
|
|
}, null, true);
|
|
this.btnContainer = tb.firstChild.firstChild.firstChild;
|
|
}
|
|
var bconfig = {
|
|
handler: handler,
|
|
scope: scope,
|
|
minWidth: this.minButtonWidth,
|
|
hideParent:true
|
|
};
|
|
if(typeof config == "string"){
|
|
bconfig.text = config;
|
|
}else{
|
|
if(config.tag){
|
|
bconfig.dhconfig = config;
|
|
}else{
|
|
Ext.apply(bconfig, config);
|
|
}
|
|
}
|
|
var btn = new Ext.Button(
|
|
this.btnContainer.appendChild(document.createElement("td")),
|
|
bconfig
|
|
);
|
|
this.syncBodyHeight();
|
|
if(!this.buttons){
|
|
|
|
this.buttons = [];
|
|
}
|
|
this.buttons.push(btn);
|
|
return btn;
|
|
},
|
|
|
|
|
|
setDefaultButton : function(btn){
|
|
this.defaultButton = btn;
|
|
return this;
|
|
},
|
|
|
|
|
|
getHeaderFooterHeight : function(safe){
|
|
var height = 0;
|
|
if(this.header){
|
|
height += this.header.getHeight();
|
|
}
|
|
if(this.footer){
|
|
var fm = this.footer.getMargins();
|
|
height += (this.footer.getHeight()+fm.top+fm.bottom);
|
|
}
|
|
height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
|
|
height += this.centerBg.getPadding("tb");
|
|
return height;
|
|
},
|
|
|
|
|
|
syncBodyHeight : function(){
|
|
var bd = this.body, cb = this.centerBg, bw = this.bwrap;
|
|
var height = this.size.height - this.getHeaderFooterHeight(false);
|
|
bd.setHeight(height-bd.getMargins("tb"));
|
|
var hh = this.header.getHeight();
|
|
var h = this.size.height-hh;
|
|
cb.setHeight(h);
|
|
bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
|
|
bw.setHeight(h-cb.getPadding("tb"));
|
|
bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
|
|
bd.setWidth(bw.getWidth(true));
|
|
if(this.tabs){
|
|
this.tabs.syncHeight();
|
|
if(Ext.isIE){
|
|
this.tabs.el.repaint();
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
restoreState : function(){
|
|
var box = Ext.state.Manager.get(this.stateId || (this.el.id + "-state"));
|
|
if(box && box.width){
|
|
this.xy = [box.x, box.y];
|
|
this.resizeTo(box.width, box.height);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
beforeShow : function(){
|
|
this.expand();
|
|
if(this.fixedcenter){
|
|
this.xy = this.el.getCenterXY(true);
|
|
}
|
|
if(this.modal){
|
|
Ext.get(document.body).addClass("x-body-masked");
|
|
this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
this.mask.show();
|
|
}
|
|
this.constrainXY();
|
|
},
|
|
|
|
|
|
animShow : function(){
|
|
var b = Ext.get(this.animateTarget, true).getBox();
|
|
this.proxy.setSize(b.width, b.height);
|
|
this.proxy.setLocation(b.x, b.y);
|
|
this.proxy.show();
|
|
this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
|
|
true, .35, this.showEl.createDelegate(this));
|
|
},
|
|
|
|
|
|
show : function(animateTarget){
|
|
if (this.fireEvent("beforeshow", this) === false){
|
|
return;
|
|
}
|
|
if(this.syncHeightBeforeShow){
|
|
this.syncBodyHeight();
|
|
}else if(this.firstShow){
|
|
this.firstShow = false;
|
|
this.syncBodyHeight();
|
|
}
|
|
this.animateTarget = animateTarget || this.animateTarget;
|
|
if(!this.el.isVisible()){
|
|
this.beforeShow();
|
|
if(this.animateTarget){
|
|
this.animShow();
|
|
}else{
|
|
this.showEl();
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
showEl : function(){
|
|
this.proxy.hide();
|
|
this.el.setXY(this.xy);
|
|
this.el.show();
|
|
this.adjustAssets(true);
|
|
this.toFront();
|
|
this.focus();
|
|
|
|
if(Ext.isIE){
|
|
this.el.repaint();
|
|
}
|
|
this.fireEvent("show", this);
|
|
},
|
|
|
|
|
|
focus : function(){
|
|
if(this.defaultButton){
|
|
this.defaultButton.focus();
|
|
}else{
|
|
this.focusEl.focus();
|
|
}
|
|
},
|
|
|
|
|
|
constrainXY : function(){
|
|
if(this.constraintoviewport !== false){
|
|
if(!this.viewSize){
|
|
if(this.container){
|
|
var s = this.container.getSize();
|
|
this.viewSize = [s.width, s.height];
|
|
}else{
|
|
this.viewSize = [Ext.lib.Dom.getViewWidth(),Ext.lib.Dom.getViewHeight()];
|
|
}
|
|
}
|
|
var s = Ext.get(this.container||document).getScroll();
|
|
|
|
var x = this.xy[0], y = this.xy[1];
|
|
var w = this.size.width, h = this.size.height;
|
|
var vw = this.viewSize[0], vh = this.viewSize[1];
|
|
|
|
var moved = false;
|
|
|
|
if(x + w > vw+s.left){
|
|
x = vw - w;
|
|
moved = true;
|
|
}
|
|
if(y + h > vh+s.top){
|
|
y = vh - h;
|
|
moved = true;
|
|
}
|
|
|
|
if(x < s.left){
|
|
x = s.left;
|
|
moved = true;
|
|
}
|
|
if(y < s.top){
|
|
y = s.top;
|
|
moved = true;
|
|
}
|
|
if(moved){
|
|
|
|
this.xy = [x, y];
|
|
if(this.isVisible()){
|
|
this.el.setLocation(x, y);
|
|
this.adjustAssets();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
onDrag : function(){
|
|
if(!this.proxyDrag){
|
|
this.xy = this.el.getXY();
|
|
this.adjustAssets();
|
|
}
|
|
},
|
|
|
|
|
|
adjustAssets : function(doShow){
|
|
var x = this.xy[0], y = this.xy[1];
|
|
var w = this.size.width, h = this.size.height;
|
|
if(doShow === true){
|
|
if(this.shadow){
|
|
this.shadow.show(this.el);
|
|
}
|
|
if(this.shim){
|
|
this.shim.show();
|
|
}
|
|
}
|
|
if(this.shadow && this.shadow.isVisible()){
|
|
this.shadow.show(this.el);
|
|
}
|
|
if(this.shim && this.shim.isVisible()){
|
|
this.shim.setBounds(x, y, w, h);
|
|
}
|
|
},
|
|
|
|
|
|
adjustViewport : function(w, h){
|
|
if(!w || !h){
|
|
w = Ext.lib.Dom.getViewWidth();
|
|
h = Ext.lib.Dom.getViewHeight();
|
|
}
|
|
|
|
this.viewSize = [w, h];
|
|
if(this.modal && this.mask.isVisible()){
|
|
this.mask.setSize(w, h);
|
|
this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
}
|
|
if(this.isVisible()){
|
|
this.constrainXY();
|
|
}
|
|
},
|
|
|
|
|
|
destroy : function(removeEl){
|
|
if(this.isVisible()){
|
|
this.animateTarget = null;
|
|
this.hide();
|
|
}
|
|
Ext.EventManager.removeResizeListener(this.adjustViewport, this);
|
|
if(this.tabs){
|
|
this.tabs.destroy(removeEl);
|
|
}
|
|
Ext.destroy(
|
|
this.shim,
|
|
this.proxy,
|
|
this.resizer,
|
|
this.close,
|
|
this.mask
|
|
);
|
|
if(this.dd){
|
|
this.dd.unreg();
|
|
}
|
|
if(this.buttons){
|
|
for(var i = 0, len = this.buttons.length; i < len; i++){
|
|
this.buttons[i].destroy();
|
|
}
|
|
}
|
|
this.el.removeAllListeners();
|
|
if(removeEl === true){
|
|
this.el.update("");
|
|
this.el.remove();
|
|
}
|
|
Ext.DialogManager.unregister(this);
|
|
},
|
|
|
|
|
|
startMove : function(){
|
|
if(this.proxyDrag){
|
|
this.proxy.show();
|
|
}
|
|
if(this.constraintoviewport !== false){
|
|
this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
|
|
}
|
|
},
|
|
|
|
|
|
endMove : function(){
|
|
if(!this.proxyDrag){
|
|
Ext.dd.DD.prototype.endDrag.apply(this.dd, arguments);
|
|
}else{
|
|
Ext.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
|
|
this.proxy.hide();
|
|
}
|
|
this.refreshSize();
|
|
this.adjustAssets();
|
|
this.focus();
|
|
this.fireEvent("move", this, this.xy[0], this.xy[1]);
|
|
},
|
|
|
|
|
|
toFront : function(){
|
|
Ext.DialogManager.bringToFront(this);
|
|
return this;
|
|
},
|
|
|
|
|
|
toBack : function(){
|
|
Ext.DialogManager.sendToBack(this);
|
|
return this;
|
|
},
|
|
|
|
|
|
center : function(){
|
|
var xy = this.el.getCenterXY(true);
|
|
this.moveTo(xy[0], xy[1]);
|
|
return this;
|
|
},
|
|
|
|
|
|
moveTo : function(x, y){
|
|
this.xy = [x,y];
|
|
if(this.isVisible()){
|
|
this.el.setXY(this.xy);
|
|
this.adjustAssets();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
alignTo : function(element, position, offsets){
|
|
this.xy = this.el.getAlignToXY(element, position, offsets);
|
|
if(this.isVisible()){
|
|
this.el.setXY(this.xy);
|
|
this.adjustAssets();
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
anchorTo : function(el, alignment, offsets, monitorScroll){
|
|
var action = function(){
|
|
this.alignTo(el, alignment, offsets);
|
|
};
|
|
Ext.EventManager.onWindowResize(action, this);
|
|
var tm = typeof monitorScroll;
|
|
if(tm != 'undefined'){
|
|
Ext.EventManager.on(window, 'scroll', action, this,
|
|
{buffer: tm == 'number' ? monitorScroll : 50});
|
|
}
|
|
action.call(this);
|
|
return this;
|
|
},
|
|
|
|
|
|
isVisible : function(){
|
|
return this.el.isVisible();
|
|
},
|
|
|
|
|
|
animHide : function(callback){
|
|
var b = Ext.get(this.animateTarget).getBox();
|
|
this.proxy.show();
|
|
this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
|
|
this.el.hide();
|
|
this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
|
|
this.hideEl.createDelegate(this, [callback]));
|
|
},
|
|
|
|
|
|
hide : function(callback){
|
|
if (this.fireEvent("beforehide", this) === false){
|
|
return;
|
|
}
|
|
if(this.shadow){
|
|
this.shadow.hide();
|
|
}
|
|
if(this.shim) {
|
|
this.shim.hide();
|
|
}
|
|
if(this.animateTarget){
|
|
this.animHide(callback);
|
|
}else{
|
|
this.el.hide();
|
|
this.hideEl(callback);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
hideEl : function(callback){
|
|
this.proxy.hide();
|
|
if(this.modal){
|
|
this.mask.hide();
|
|
Ext.get(document.body).removeClass("x-body-masked");
|
|
}
|
|
this.fireEvent("hide", this);
|
|
if(typeof callback == "function"){
|
|
callback();
|
|
}
|
|
},
|
|
|
|
|
|
hideAction : function(){
|
|
this.setLeft("-10000px");
|
|
this.setTop("-10000px");
|
|
this.setStyle("visibility", "hidden");
|
|
},
|
|
|
|
|
|
refreshSize : function(){
|
|
this.size = this.el.getSize();
|
|
this.xy = this.el.getXY();
|
|
Ext.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
|
|
},
|
|
|
|
|
|
|
|
setZIndex : function(index){
|
|
if(this.modal){
|
|
this.mask.setStyle("z-index", index);
|
|
}
|
|
if(this.shim){
|
|
this.shim.setStyle("z-index", ++index);
|
|
}
|
|
if(this.shadow){
|
|
this.shadow.setZIndex(++index);
|
|
}
|
|
this.el.setStyle("z-index", ++index);
|
|
if(this.proxy){
|
|
this.proxy.setStyle("z-index", ++index);
|
|
}
|
|
if(this.resizer){
|
|
this.resizer.proxy.setStyle("z-index", ++index);
|
|
}
|
|
|
|
this.lastZIndex = index;
|
|
},
|
|
|
|
|
|
getEl : function(){
|
|
return this.el;
|
|
}
|
|
});
|
|
|
|
|
|
Ext.DialogManager = function(){
|
|
var list = {};
|
|
var accessList = [];
|
|
var front = null;
|
|
|
|
|
|
var sortDialogs = function(d1, d2){
|
|
return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
|
|
};
|
|
|
|
|
|
var orderDialogs = function(){
|
|
accessList.sort(sortDialogs);
|
|
var seed = Ext.DialogManager.zseed;
|
|
for(var i = 0, len = accessList.length; i < len; i++){
|
|
var dlg = accessList[i];
|
|
if(dlg){
|
|
dlg.setZIndex(seed + (i*10));
|
|
}
|
|
}
|
|
};
|
|
|
|
return {
|
|
|
|
zseed : 9000,
|
|
|
|
|
|
register : function(dlg){
|
|
list[dlg.id] = dlg;
|
|
accessList.push(dlg);
|
|
},
|
|
|
|
|
|
unregister : function(dlg){
|
|
delete list[dlg.id];
|
|
if(!accessList.indexOf){
|
|
for(var i = 0, len = accessList.length; i < len; i++){
|
|
if(accessList[i] == dlg){
|
|
accessList.splice(i, 1);
|
|
return;
|
|
}
|
|
}
|
|
}else{
|
|
var i = accessList.indexOf(dlg);
|
|
if(i != -1){
|
|
accessList.splice(i, 1);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
get : function(id){
|
|
return typeof id == "object" ? id : list[id];
|
|
},
|
|
|
|
|
|
bringToFront : function(dlg){
|
|
dlg = this.get(dlg);
|
|
if(dlg != front){
|
|
front = dlg;
|
|
dlg._lastAccess = new Date().getTime();
|
|
orderDialogs();
|
|
}
|
|
return dlg;
|
|
},
|
|
|
|
|
|
sendToBack : function(dlg){
|
|
dlg = this.get(dlg);
|
|
dlg._lastAccess = -(new Date().getTime());
|
|
orderDialogs();
|
|
return dlg;
|
|
},
|
|
|
|
|
|
hideAll : function(){
|
|
for(var id in list){
|
|
if(list[id] && typeof list[id] != "function" && list[id].isVisible()){
|
|
list[id].hide();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}();
|
|
|
|
|
|
Ext.LayoutDialog = function(el, config){
|
|
config.autoTabs = false;
|
|
Ext.LayoutDialog.superclass.constructor.call(this, el, config);
|
|
this.body.setStyle({overflow:"hidden", position:"relative"});
|
|
this.layout = new Ext.BorderLayout(this.body.dom, config);
|
|
this.layout.monitorWindowResize = false;
|
|
this.el.addClass("x-dlg-auto-layout");
|
|
|
|
this.center = Ext.BasicDialog.prototype.center;
|
|
this.on("show", this.layout.layout, this.layout, true);
|
|
};
|
|
Ext.extend(Ext.LayoutDialog, Ext.BasicDialog, {
|
|
|
|
endUpdate : function(){
|
|
this.layout.endUpdate();
|
|
},
|
|
|
|
|
|
beginUpdate : function(){
|
|
this.layout.beginUpdate();
|
|
},
|
|
|
|
|
|
getLayout : function(){
|
|
return this.layout;
|
|
},
|
|
|
|
showEl : function(){
|
|
Ext.LayoutDialog.superclass.showEl.apply(this, arguments);
|
|
if(Ext.isIE7){
|
|
this.layout.layout();
|
|
}
|
|
},
|
|
|
|
|
|
|
|
syncBodyHeight : function(){
|
|
Ext.LayoutDialog.superclass.syncBodyHeight.call(this);
|
|
if(this.layout){this.layout.layout();}
|
|
}
|
|
});
|
|
|
|
Ext.MessageBox = function(){
|
|
var dlg, opt, mask, waitTimer;
|
|
var bodyEl, msgEl, textboxEl, textareaEl, progressEl, pp;
|
|
var buttons, activeTextEl, bwidth;
|
|
|
|
|
|
var handleButton = function(button){
|
|
dlg.hide();
|
|
Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value], 1);
|
|
};
|
|
|
|
|
|
var handleHide = function(){
|
|
if(opt && opt.cls){
|
|
dlg.el.removeClass(opt.cls);
|
|
}
|
|
if(waitTimer){
|
|
Ext.TaskMgr.stop(waitTimer);
|
|
waitTimer = null;
|
|
}
|
|
};
|
|
|
|
|
|
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;
|
|
};
|
|
|
|
|
|
var handleEsc = function(d, k, e){
|
|
if(opt && opt.closable !== false){
|
|
dlg.hide();
|
|
}
|
|
if(e){
|
|
e.stopEvent();
|
|
}
|
|
};
|
|
|
|
return {
|
|
|
|
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;
|
|
},
|
|
|
|
|
|
updateText : function(text){
|
|
if(!dlg.isVisible() && !opt.width){
|
|
dlg.resizeTo(this.maxWidth, 100);
|
|
}
|
|
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;
|
|
},
|
|
|
|
|
|
updateProgress : function(value, text){
|
|
if(text){
|
|
this.updateText(text);
|
|
}
|
|
pp.setWidth(Math.floor(value*progressEl.dom.firstChild.offsetWidth));
|
|
return this;
|
|
},
|
|
|
|
|
|
isVisible : function(){
|
|
return dlg && dlg.isVisible();
|
|
},
|
|
|
|
|
|
hide : function(){
|
|
if(this.isVisible()){
|
|
dlg.hide();
|
|
}
|
|
},
|
|
|
|
|
|
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()){
|
|
|
|
document.body.appendChild(dlg.el.dom);
|
|
d.animateTarget = null;
|
|
d.show(options.animEl);
|
|
}
|
|
return this;
|
|
},
|
|
|
|
|
|
progress : function(title, msg){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: false,
|
|
progress:true,
|
|
closable:false,
|
|
minWidth: this.minProgressWidth
|
|
});
|
|
return this;
|
|
},
|
|
|
|
|
|
alert : function(title, msg, fn, scope){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: this.OK,
|
|
fn: fn,
|
|
scope : scope
|
|
});
|
|
return this;
|
|
},
|
|
|
|
|
|
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;
|
|
},
|
|
|
|
|
|
confirm : function(title, msg, fn, scope){
|
|
this.show({
|
|
title : title,
|
|
msg : msg,
|
|
buttons: this.YESNO,
|
|
fn: fn,
|
|
scope : scope
|
|
});
|
|
return this;
|
|
},
|
|
|
|
|
|
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;
|
|
},
|
|
|
|
|
|
OK : {ok:true},
|
|
|
|
YESNO : {yes:true, no:true},
|
|
|
|
OKCANCEL : {ok:true, cancel:true},
|
|
|
|
YESNOCANCEL : {yes:true, no:true, cancel:true},
|
|
|
|
|
|
defaultTextHeight : 75,
|
|
|
|
maxWidth : 600,
|
|
|
|
minWidth : 100,
|
|
|
|
minProgressWidth : 250,
|
|
|
|
buttonText : {
|
|
ok : "OK",
|
|
cancel : "Cancel",
|
|
yes : "Yes",
|
|
no : "No"
|
|
}
|
|
};
|
|
}();
|
|
|
|
|
|
Ext.Msg = Ext.MessageBox;
|