1186 lines
No EOL
48 KiB
HTML
1186 lines
No EOL
48 KiB
HTML
<html><head><title>BasicDialog.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>BasicDialog.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.BasicDialog
|
|
* @extends Ext.util.Observable
|
|
* Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
|
|
* <pre><code>
|
|
<b>var</b> dlg = <b>new</b> Ext.BasicDialog("my-dlg", {
|
|
height: 200,
|
|
width: 300,
|
|
minHeight: 100,
|
|
minWidth: 150,
|
|
modal: true,
|
|
proxyDrag: true,
|
|
shadow: true
|
|
});
|
|
dlg.addKeyListener(27, dlg.hide, dlg); <i>// ESC can also close the dialog</i>
|
|
dlg.addButton('OK', dlg.hide, dlg); <i>// Could call a save <b>function</b> instead of hiding</i>
|
|
dlg.addButton('Cancel', dlg.hide, dlg);
|
|
dlg.show();
|
|
</code></pre>
|
|
<b>A Dialog should always be a direct child of the body element.</b>
|
|
* @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
|
|
* @cfg {String} title Default text to display <b>in</b> the title bar (defaults to null)
|
|
* @cfg {Number} width Width of the dialog <b>in</b> pixels (can also be set via CSS). Determined by browser <b>if</b> unspecified.
|
|
* @cfg {Number} height Height of the dialog <b>in</b> pixels (can also be set via CSS). Determined by browser <b>if</b> unspecified.
|
|
* @cfg {Number} x The <b>default</b> top page coordinate of the dialog (defaults to center screen)
|
|
* @cfg {Number} y The <b>default</b> left page coordinate of the dialog (defaults to center screen)
|
|
* @cfg {String/Element} animateTarget Id or element from which the dialog should animate <b>while</b> opening
|
|
* (defaults to null <b>with</b> no animation)
|
|
* @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
|
|
* @cfg {String} resizeHandles Which resize handles to display - see the {@link Ext.Resizable} handles config
|
|
* property <b>for</b> valid values (defaults to 'all')
|
|
* @cfg {Number} minHeight The minimum allowable height <b>for</b> a resizable dialog (defaults to 80)
|
|
* @cfg {Number} minWidth The minimum allowable width <b>for</b> a resizable dialog (defaults to 200)
|
|
* @cfg {Boolean} modal True to show the dialog modally, preventing user interaction <b>with</b> the rest of the page (defaults to false)
|
|
* @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
|
|
* @cfg {Boolean} closable False to remove the built-<b>in</b> top-right corner close button (defaults to true)
|
|
* @cfg {Boolean} collapsible False to remove the built-<b>in</b> top-right corner collapse button (defaults to true)
|
|
* @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
|
|
* @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
|
|
* @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
|
|
* @cfg {Boolean} autoTabs If true, all elements <b>with</b> class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
|
|
* @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
|
|
* @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
|
|
* draggable = true (defaults to false)
|
|
* @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
|
|
* @cfg {Boolean/String} shadow True or "sides" <b>for</b> the <b>default</b> effect, "frame" <b>for</b> 4-way shadow, and "drop" <b>for</b> bottom-right
|
|
* shadow (defaults to false)
|
|
* @cfg {Number} shadowOffset The number of pixels to offset the shadow <b>if</b> displayed (defaults to 5)
|
|
* @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
|
|
* @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
|
|
* @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
|
|
* @constructor
|
|
* Create a <b>new</b> BasicDialog.
|
|
* @param {String/HTMLElement/Ext.Element} el The container element or DOM node, or its id
|
|
* @param {Object} config Configuration options
|
|
*/</i>
|
|
Ext.BasicDialog = <b>function</b>(el, config){
|
|
<b>this</b>.el = Ext.get(el);
|
|
<b>var</b> dh = Ext.DomHelper;
|
|
<b>if</b>(!<b>this</b>.el && config && config.autoCreate){
|
|
<b>if</b>(typeof config.autoCreate == "object"){
|
|
<b>if</b>(!config.autoCreate.id){
|
|
config.autoCreate.id = el;
|
|
}
|
|
<b>this</b>.el = dh.append(document.body,
|
|
config.autoCreate, true);
|
|
}<b>else</b>{
|
|
<b>this</b>.el = dh.append(document.body,
|
|
{tag: "div", id: el, style:'visibility:hidden;'}, true);
|
|
}
|
|
}
|
|
el = <b>this</b>.el;
|
|
el.setDisplayed(true);
|
|
el.hide = <b>this</b>.hideAction;
|
|
<b>this</b>.id = el.id;
|
|
el.addClass("x-dlg");
|
|
|
|
Ext.apply(<b>this</b>, config);
|
|
|
|
<b>this</b>.proxy = el.createProxy("x-dlg-proxy");
|
|
<b>this</b>.proxy.hide = <b>this</b>.hideAction;
|
|
<b>this</b>.proxy.setOpacity(.5);
|
|
<b>this</b>.proxy.hide();
|
|
|
|
<b>if</b>(config.width){
|
|
el.setWidth(config.width);
|
|
}
|
|
<b>if</b>(config.height){
|
|
el.setHeight(config.height);
|
|
}
|
|
<b>this</b>.size = el.getSize();
|
|
<b>if</b>(typeof config.x != "undefined" && <b>typeof</b> config.y != "undefined"){
|
|
<b>this</b>.xy = [config.x,config.y];
|
|
}<b>else</b>{
|
|
<b>this</b>.xy = el.getCenterXY(true);
|
|
}
|
|
<i>/** The header element @type Ext.Element */</i>
|
|
<b>this</b>.header = el.child("/.x-dlg-hd");
|
|
<i>/** The body element @type Ext.Element */</i>
|
|
<b>this</b>.body = el.child("/.x-dlg-bd");
|
|
<i>/** The footer element @type Ext.Element */</i>
|
|
<b>this</b>.footer = el.child("/.x-dlg-ft");
|
|
|
|
<b>if</b>(!<b>this</b>.header){
|
|
<b>this</b>.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: "&#160;"}, <b>this</b>.body ? <b>this</b>.body.dom : null);
|
|
}
|
|
<b>if</b>(!<b>this</b>.body){
|
|
<b>this</b>.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
|
|
}
|
|
|
|
<b>this</b>.header.unselectable();
|
|
<b>if</b>(this.title){
|
|
<b>this</b>.header.update(<b>this</b>.title);
|
|
}
|
|
<i>// <b>this</b> element allows the dialog to be focused <b>for</b> keyboard event</i>
|
|
<b>this</b>.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
|
|
<b>this</b>.focusEl.swallowEvent("click", true);
|
|
|
|
<b>this</b>.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
|
|
|
|
<i>// wrap the body and footer <b>for</b> special rendering</i>
|
|
<b>this</b>.bwrap = <b>this</b>.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
|
|
<b>if</b>(this.footer){
|
|
<b>this</b>.bwrap.dom.appendChild(<b>this</b>.footer.dom);
|
|
}
|
|
|
|
<b>this</b>.bg = <b>this</b>.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">&#160;</div></div></div>'
|
|
});
|
|
<b>this</b>.centerBg = <b>this</b>.bg.child("div.x-dlg-bg-center");
|
|
|
|
|
|
<b>if</b>(this.autoScroll !== false && !<b>this</b>.autoTabs){
|
|
<b>this</b>.body.setStyle("overflow", "auto");
|
|
}
|
|
|
|
<b>this</b>.toolbox = <b>this</b>.el.createChild({cls: "x-dlg-toolbox"});
|
|
|
|
<b>if</b>(this.closable !== false){
|
|
<b>this</b>.el.addClass("x-dlg-closable");
|
|
<b>this</b>.close = <b>this</b>.toolbox.createChild({cls:"x-dlg-close"});
|
|
<b>this</b>.close.on("click", <b>this</b>.closeClick, <b>this</b>);
|
|
<b>this</b>.close.addClassOnOver("x-dlg-close-over");
|
|
}
|
|
<b>if</b>(this.collapsible !== false){
|
|
<b>this</b>.collapseBtn = <b>this</b>.toolbox.createChild({cls:"x-dlg-collapse"});
|
|
<b>this</b>.collapseBtn.on("click", <b>this</b>.collapseClick, <b>this</b>);
|
|
<b>this</b>.collapseBtn.addClassOnOver("x-dlg-collapse-over");
|
|
<b>this</b>.header.on("dblclick", <b>this</b>.collapseClick, <b>this</b>);
|
|
}
|
|
<b>if</b>(this.resizable !== false){
|
|
<b>this</b>.el.addClass("x-dlg-resizable");
|
|
<b>this</b>.resizer = <b>new</b> Ext.Resizable(el, {
|
|
minWidth: <b>this</b>.minWidth || 80,
|
|
minHeight:<b>this</b>.minHeight || 80,
|
|
handles: <b>this</b>.resizeHandles || "all",
|
|
pinned: true
|
|
});
|
|
<b>this</b>.resizer.on("beforeresize", <b>this</b>.beforeResize, <b>this</b>);
|
|
<b>this</b>.resizer.on("resize", <b>this</b>.onResize, <b>this</b>);
|
|
}
|
|
<b>if</b>(this.draggable !== false){
|
|
el.addClass("x-dlg-draggable");
|
|
<b>if</b> (!<b>this</b>.proxyDrag) {
|
|
<b>var</b> dd = <b>new</b> Ext.dd.DD(el.dom.id, "WindowDrag");
|
|
}
|
|
<b>else</b> {
|
|
<b>var</b> dd = <b>new</b> Ext.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: <b>this</b>.proxy.id});
|
|
}
|
|
dd.setHandleElId(<b>this</b>.header.id);
|
|
dd.endDrag = <b>this</b>.endMove.createDelegate(<b>this</b>);
|
|
dd.startDrag = <b>this</b>.startMove.createDelegate(<b>this</b>);
|
|
dd.onDrag = <b>this</b>.onDrag.createDelegate(<b>this</b>);
|
|
dd.scroll = false;
|
|
<b>this</b>.dd = dd;
|
|
}
|
|
<b>if</b>(this.modal){
|
|
<b>this</b>.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
|
|
<b>this</b>.mask.enableDisplayMode("block");
|
|
<b>this</b>.mask.hide();
|
|
<b>this</b>.el.addClass("x-dlg-modal");
|
|
}
|
|
<b>if</b>(this.shadow){
|
|
<b>this</b>.shadow = <b>new</b> Ext.Shadow({
|
|
mode : <b>typeof</b> this.shadow == "string" ? <b>this</b>.shadow : "sides",
|
|
offset : <b>this</b>.shadowOffset
|
|
});
|
|
}<b>else</b>{
|
|
<b>this</b>.shadowOffset = 0;
|
|
}
|
|
<b>if</b>(Ext.useShims && <b>this</b>.shim !== false){
|
|
<b>this</b>.shim = <b>this</b>.el.createShim();
|
|
<b>this</b>.shim.hide = <b>this</b>.hideAction;
|
|
<b>this</b>.shim.hide();
|
|
}<b>else</b>{
|
|
<b>this</b>.shim = false;
|
|
}
|
|
<b>if</b>(this.autoTabs){
|
|
<b>this</b>.initTabs();
|
|
}
|
|
<b>this</b>.addEvents({
|
|
<i>/**
|
|
* @event keydown
|
|
* Fires when a key is pressed
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
* @param {Ext.EventObject} e
|
|
*/</i>
|
|
"keydown" : true,
|
|
<i>/**
|
|
* @event move
|
|
* Fires when <b>this</b> dialog is moved by the user.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
* @param {Number} x The <b>new</b> page X
|
|
* @param {Number} y The <b>new</b> page Y
|
|
*/</i>
|
|
"move" : true,
|
|
<i>/**
|
|
* @event resize
|
|
* Fires when <b>this</b> dialog is resized by the user.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
* @param {Number} width The <b>new</b> width
|
|
* @param {Number} height The <b>new</b> height
|
|
*/</i>
|
|
"resize" : true,
|
|
<i>/**
|
|
* @event beforehide
|
|
* Fires before <b>this</b> dialog is hidden.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
"beforehide" : true,
|
|
<i>/**
|
|
* @event hide
|
|
* Fires when <b>this</b> dialog is hidden.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
"hide" : true,
|
|
<i>/**
|
|
* @event beforeshow
|
|
* Fires before <b>this</b> dialog is shown.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
"beforeshow" : true,
|
|
<i>/**
|
|
* @event show
|
|
* Fires when <b>this</b> dialog is shown.
|
|
* @param {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
"show" : true
|
|
});
|
|
el.on("keydown", <b>this</b>.onKeyDown, <b>this</b>);
|
|
el.on("mousedown", <b>this</b>.toFront, <b>this</b>);
|
|
Ext.EventManager.onWindowResize(<b>this</b>.adjustViewport, <b>this</b>, true);
|
|
<b>this</b>.el.hide();
|
|
Ext.DialogManager.register(<b>this</b>);
|
|
Ext.BasicDialog.superclass.constructor.call(<b>this</b>);
|
|
};
|
|
|
|
Ext.extend(Ext.BasicDialog, Ext.util.Observable, {
|
|
shadowOffset: 5,
|
|
minHeight: 80,
|
|
minWidth: 200,
|
|
minButtonWidth: 75,
|
|
defaultButton: null,
|
|
buttonAlign: "right",
|
|
tabTag: 'div',
|
|
firstShow: true,
|
|
|
|
<i>/**
|
|
* Sets the dialog title text
|
|
* @param {String} text The title text to display
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
setTitle : <b>function</b>(text){
|
|
<b>this</b>.header.update(text);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>// private</i>
|
|
closeClick : <b>function</b>(){
|
|
<b>this</b>.hide();
|
|
},
|
|
|
|
<i>// private</i>
|
|
collapseClick : <b>function</b>(){
|
|
<b>this</b>[this.collapsed ? "expand" : "collapse"]();
|
|
},
|
|
|
|
<i>/**
|
|
* Collapses the dialog to its minimized state (only the title bar is visible).
|
|
* Equivalent to the user clicking the collapse dialog button.
|
|
*/</i>
|
|
collapse : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.collapsed){
|
|
<b>this</b>.collapsed = true;
|
|
<b>this</b>.el.addClass("x-dlg-collapsed");
|
|
<b>this</b>.restoreHeight = <b>this</b>.el.getHeight();
|
|
<b>this</b>.resizeTo(<b>this</b>.el.getWidth(), <b>this</b>.header.getHeight());
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Expands a collapsed dialog back to its normal state. Equivalent to the user
|
|
* clicking the expand dialog button.
|
|
*/</i>
|
|
expand : <b>function</b>(){
|
|
<b>if</b>(this.collapsed){
|
|
<b>this</b>.collapsed = false;
|
|
<b>this</b>.el.removeClass("x-dlg-collapsed");
|
|
<b>this</b>.resizeTo(<b>this</b>.el.getWidth(), <b>this</b>.restoreHeight);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Reinitializes the tabs component, clearing out old tabs and finding <b>new</b> ones.
|
|
* @<b>return</b> {Ext.TabPanel} The tabs component
|
|
*/</i>
|
|
initTabs : <b>function</b>(){
|
|
<b>var</b> tabs = <b>this</b>.getTabs();
|
|
<b>while</b>(tabs.getTab(0)){
|
|
tabs.removeTab(0);
|
|
}
|
|
<b>this</b>.el.select(<b>this</b>.tabTag+'.x-dlg-tab').each(<b>function</b>(el){
|
|
<b>var</b> dom = el.dom;
|
|
tabs.addTab(Ext.id(dom), dom.title);
|
|
dom.title = "";
|
|
});
|
|
tabs.activate(0);
|
|
<b>return</b> tabs;
|
|
},
|
|
|
|
<i>// private</i>
|
|
beforeResize : <b>function</b>(){
|
|
<b>this</b>.resizer.minHeight = Math.max(<b>this</b>.minHeight, <b>this</b>.getHeaderFooterHeight(true)+40);
|
|
},
|
|
|
|
<i>// private</i>
|
|
onResize : <b>function</b>(){
|
|
<b>this</b>.refreshSize();
|
|
<b>this</b>.syncBodyHeight();
|
|
<b>this</b>.adjustAssets();
|
|
<b>this</b>.focus();
|
|
<b>this</b>.fireEvent("resize", <b>this</b>, <b>this</b>.size.width, <b>this</b>.size.height);
|
|
},
|
|
|
|
<i>// private</i>
|
|
onKeyDown : <b>function</b>(e){
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.fireEvent("keydown", <b>this</b>, e);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Resizes the dialog.
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
resizeTo : <b>function</b>(width, height){
|
|
<b>this</b>.el.setSize(width, height);
|
|
<b>this</b>.size = {width: width, height: height};
|
|
<b>this</b>.syncBodyHeight();
|
|
<b>if</b>(this.fixedcenter){
|
|
<b>this</b>.center();
|
|
}
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.constrainXY();
|
|
<b>this</b>.adjustAssets();
|
|
}
|
|
<b>this</b>.fireEvent("resize", <b>this</b>, width, height);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
|
|
<i>/**
|
|
* Resizes the dialog to fit the specified content size.
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
setContentSize : <b>function</b>(w, h){
|
|
h += <b>this</b>.getHeaderFooterHeight() + <b>this</b>.body.getMargins("tb");
|
|
w += <b>this</b>.body.getMargins("lr") + <b>this</b>.bwrap.getMargins("lr") + <b>this</b>.centerBg.getPadding("lr");
|
|
<i>//<b>if</b>(!<b>this</b>.el.isBorderBox()){</i>
|
|
h += <b>this</b>.body.getPadding("tb") + <b>this</b>.bwrap.getBorderWidth("tb") + <b>this</b>.body.getBorderWidth("tb") + <b>this</b>.el.getBorderWidth("tb");
|
|
w += <b>this</b>.body.getPadding("lr") + <b>this</b>.bwrap.getBorderWidth("lr") + <b>this</b>.body.getBorderWidth("lr") + <b>this</b>.bwrap.getPadding("lr") + <b>this</b>.el.getBorderWidth("lr");
|
|
<i>//}</i>
|
|
<b>if</b>(this.tabs){
|
|
h += <b>this</b>.tabs.stripWrap.getHeight() + <b>this</b>.tabs.bodyEl.getMargins("tb") + <b>this</b>.tabs.bodyEl.getPadding("tb");
|
|
w += <b>this</b>.tabs.bodyEl.getMargins("lr") + <b>this</b>.tabs.bodyEl.getPadding("lr");
|
|
}
|
|
<b>this</b>.resizeTo(w, h);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Adds a key listener <b>for</b> when <b>this</b> dialog is displayed. This allows you to hook <b>in</b> a <b>function</b> that will be
|
|
* executed <b>in</b> response to a particular key being pressed <b>while</b> the dialog is active.
|
|
* @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object <b>with</b> the following options:
|
|
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
|
|
* @param {Function} fn The <b>function</b> to call
|
|
* @param {Object} scope (optional) The scope of the <b>function</b>
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
addKeyListener : <b>function</b>(key, fn, scope){
|
|
<b>var</b> keyCode, shift, ctrl, alt;
|
|
<b>if</b>(typeof key == "object" && !(key instanceof Array)){
|
|
keyCode = key["key"];
|
|
shift = key["shift"];
|
|
ctrl = key["ctrl"];
|
|
alt = key["alt"];
|
|
}<b>else</b>{
|
|
keyCode = key;
|
|
}
|
|
<b>var</b> handler = <b>function</b>(dlg, e){
|
|
<b>if</b>((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
|
|
<b>var</b> k = e.getKey();
|
|
<b>if</b>(keyCode instanceof Array){
|
|
<b>for</b>(var i = 0, len = keyCode.length; i < len; i++){
|
|
<b>if</b>(keyCode[i] == k){
|
|
fn.call(scope || window, dlg, k, e);
|
|
<b>return</b>;
|
|
}
|
|
}
|
|
}<b>else</b>{
|
|
<b>if</b>(k == keyCode){
|
|
fn.call(scope || window, dlg, k, e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
<b>this</b>.on("keydown", handler);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the TabPanel component (creates it <b>if</b> it doesn't exist).
|
|
* Note: If you wish to simply check <b>for</b> the existence of tabs without creating them,
|
|
* check <b>for</b> a null 'tabs' property.
|
|
* @<b>return</b> {Ext.TabPanel} The tabs component
|
|
*/</i>
|
|
getTabs : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.tabs){
|
|
<b>this</b>.el.addClass("x-dlg-auto-tabs");
|
|
<b>this</b>.body.addClass(<b>this</b>.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
|
|
<b>this</b>.tabs = <b>new</b> Ext.TabPanel(<b>this</b>.body.dom, <b>this</b>.tabPosition == "bottom");
|
|
}
|
|
<b>return</b> this.tabs;
|
|
},
|
|
|
|
<i>/**
|
|
* Adds a button to the footer section of the dialog.
|
|
* @param {String/Object} config A string becomes the button text, an object can either be a Button config
|
|
* object or a valid Ext.DomHelper element config
|
|
* @param {Function} handler The <b>function</b> called when the button is clicked
|
|
* @param {Object} scope (optional) The scope of the handler <b>function</b>
|
|
* @<b>return</b> {Ext.Button} <b>this</b>
|
|
*/</i>
|
|
addButton : <b>function</b>(config, handler, scope){
|
|
<b>var</b> dh = Ext.DomHelper;
|
|
<b>if</b>(!<b>this</b>.footer){
|
|
<b>this</b>.footer = dh.append(<b>this</b>.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
|
|
}
|
|
<b>if</b>(!<b>this</b>.btnContainer){
|
|
<b>var</b> tb = <b>this</b>.footer.createChild({
|
|
tag:"div",
|
|
cls:"x-dlg-btns x-dlg-btns-"+<b>this</b>.buttonAlign,
|
|
html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
|
|
}, null, true);
|
|
<b>this</b>.btnContainer = tb.firstChild.firstChild.firstChild;
|
|
}
|
|
<b>var</b> bconfig = {
|
|
handler: handler,
|
|
scope: scope,
|
|
minWidth: <b>this</b>.minButtonWidth,
|
|
hideParent:true
|
|
};
|
|
<b>if</b>(typeof config == "string"){
|
|
bconfig.text = config;
|
|
}<b>else</b>{
|
|
<b>if</b>(config.tag){
|
|
bconfig.dhconfig = config;
|
|
}<b>else</b>{
|
|
Ext.apply(bconfig, config);
|
|
}
|
|
}
|
|
<b>var</b> btn = <b>new</b> Ext.Button(
|
|
<b>this</b>.btnContainer.appendChild(document.createElement("td")),
|
|
bconfig
|
|
);
|
|
<b>this</b>.syncBodyHeight();
|
|
<b>if</b>(!<b>this</b>.buttons){
|
|
<i>/**
|
|
* Array of all the buttons that have been added to <b>this</b> dialog via addButton
|
|
* @type Array
|
|
*/</i>
|
|
<b>this</b>.buttons = [];
|
|
}
|
|
<b>this</b>.buttons.push(btn);
|
|
<b>return</b> btn;
|
|
},
|
|
|
|
<i>/**
|
|
* Sets the <b>default</b> button to be focused when the dialog is displayed.
|
|
* @param {Ext.BasicDialog.Button} btn The button object returned by {@link #addButton}
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
setDefaultButton : <b>function</b>(btn){
|
|
<b>this</b>.defaultButton = btn;
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>// private</i>
|
|
getHeaderFooterHeight : <b>function</b>(safe){
|
|
<b>var</b> height = 0;
|
|
<b>if</b>(this.header){
|
|
height += <b>this</b>.header.getHeight();
|
|
}
|
|
<b>if</b>(this.footer){
|
|
<b>var</b> fm = <b>this</b>.footer.getMargins();
|
|
height += (<b>this</b>.footer.getHeight()+fm.top+fm.bottom);
|
|
}
|
|
height += <b>this</b>.bwrap.getPadding("tb")+<b>this</b>.bwrap.getBorderWidth("tb");
|
|
height += <b>this</b>.centerBg.getPadding("tb");
|
|
<b>return</b> height;
|
|
},
|
|
|
|
<i>// private</i>
|
|
syncBodyHeight : <b>function</b>(){
|
|
<b>var</b> bd = <b>this</b>.body, cb = <b>this</b>.centerBg, bw = <b>this</b>.bwrap;
|
|
<b>var</b> height = <b>this</b>.size.height - <b>this</b>.getHeaderFooterHeight(false);
|
|
bd.setHeight(height-bd.getMargins("tb"));
|
|
<b>var</b> hh = <b>this</b>.header.getHeight();
|
|
<b>var</b> h = <b>this</b>.size.height-hh;
|
|
cb.setHeight(h);
|
|
bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
|
|
bw.setHeight(h-cb.getPadding("tb"));
|
|
bw.setWidth(<b>this</b>.el.getWidth(true)-cb.getPadding("lr"));
|
|
bd.setWidth(bw.getWidth(true));
|
|
<b>if</b>(this.tabs){
|
|
<b>this</b>.tabs.syncHeight();
|
|
<b>if</b>(Ext.isIE){
|
|
<b>this</b>.tabs.el.repaint();
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Restores the previous state of the dialog <b>if</b> Ext.state is configured.
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
restoreState : <b>function</b>(){
|
|
<b>var</b> box = Ext.state.Manager.get(<b>this</b>.stateId || (<b>this</b>.el.id + "-state"));
|
|
<b>if</b>(box && box.width){
|
|
<b>this</b>.xy = [box.x, box.y];
|
|
<b>this</b>.resizeTo(box.width, box.height);
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>// private</i>
|
|
beforeShow : <b>function</b>(){
|
|
<b>this</b>.expand();
|
|
<b>if</b>(this.fixedcenter){
|
|
<b>this</b>.xy = <b>this</b>.el.getCenterXY(true);
|
|
}
|
|
<b>if</b>(this.modal){
|
|
Ext.get(document.body).addClass("x-body-masked");
|
|
<b>this</b>.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
<b>this</b>.mask.show();
|
|
}
|
|
<b>this</b>.constrainXY();
|
|
},
|
|
|
|
<i>// private</i>
|
|
animShow : <b>function</b>(){
|
|
<b>var</b> b = Ext.get(<b>this</b>.animateTarget, true).getBox();
|
|
<b>this</b>.proxy.setSize(b.width, b.height);
|
|
<b>this</b>.proxy.setLocation(b.x, b.y);
|
|
<b>this</b>.proxy.show();
|
|
<b>this</b>.proxy.setBounds(<b>this</b>.xy[0], <b>this</b>.xy[1], <b>this</b>.size.width, <b>this</b>.size.height,
|
|
true, .35, <b>this</b>.showEl.createDelegate(<b>this</b>));
|
|
},
|
|
|
|
<i>/**
|
|
* Shows the dialog.
|
|
* @param {String/HTMLElement/Ext.Element} animateTarget (optional) Reset the animation target
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
show : <b>function</b>(animateTarget){
|
|
<b>if</b> (<b>this</b>.fireEvent("beforeshow", <b>this</b>) === false){
|
|
<b>return</b>;
|
|
}
|
|
<b>if</b>(this.syncHeightBeforeShow){
|
|
<b>this</b>.syncBodyHeight();
|
|
}<b>else</b> if(<b>this</b>.firstShow){
|
|
<b>this</b>.firstShow = false;
|
|
<b>this</b>.syncBodyHeight(); <i>// sync the height on the first show instead of <b>in</b> the constructor</i>
|
|
}
|
|
<b>this</b>.animateTarget = animateTarget || <b>this</b>.animateTarget;
|
|
<b>if</b>(!<b>this</b>.el.isVisible()){
|
|
<b>this</b>.beforeShow();
|
|
<b>if</b>(this.animateTarget){
|
|
<b>this</b>.animShow();
|
|
}<b>else</b>{
|
|
<b>this</b>.showEl();
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>// private</i>
|
|
showEl : <b>function</b>(){
|
|
<b>this</b>.proxy.hide();
|
|
<b>this</b>.el.setXY(<b>this</b>.xy);
|
|
<b>this</b>.el.show();
|
|
<b>this</b>.adjustAssets(true);
|
|
<b>this</b>.toFront();
|
|
<b>this</b>.focus();
|
|
<i>// IE peekaboo bug - fix found by Dave Fenwick</i>
|
|
<b>if</b>(Ext.isIE){
|
|
<b>this</b>.el.repaint();
|
|
}
|
|
<b>this</b>.fireEvent("show", <b>this</b>);
|
|
},
|
|
|
|
<i>/**
|
|
* Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
|
|
* dialog itself will receive focus.
|
|
*/</i>
|
|
focus : <b>function</b>(){
|
|
<b>if</b>(this.defaultButton){
|
|
<b>this</b>.defaultButton.focus();
|
|
}<b>else</b>{
|
|
<b>this</b>.focusEl.focus();
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
constrainXY : <b>function</b>(){
|
|
<b>if</b>(this.constraintoviewport !== false){
|
|
<b>if</b>(!<b>this</b>.viewSize){
|
|
<b>if</b>(this.container){
|
|
<b>var</b> s = <b>this</b>.container.getSize();
|
|
<b>this</b>.viewSize = [s.width, s.height];
|
|
}<b>else</b>{
|
|
<b>this</b>.viewSize = [Ext.lib.Dom.getViewWidth(),Ext.lib.Dom.getViewHeight()];
|
|
}
|
|
}
|
|
<b>var</b> s = Ext.get(<b>this</b>.container||document).getScroll();
|
|
|
|
<b>var</b> x = <b>this</b>.xy[0], y = <b>this</b>.xy[1];
|
|
<b>var</b> w = <b>this</b>.size.width, h = <b>this</b>.size.height;
|
|
<b>var</b> vw = <b>this</b>.viewSize[0], vh = <b>this</b>.viewSize[1];
|
|
<i>// only move it <b>if</b> it needs it</i>
|
|
<b>var</b> moved = false;
|
|
<i>// first validate right/bottom</i>
|
|
<b>if</b>(x + w > vw+s.left){
|
|
x = vw - w;
|
|
moved = true;
|
|
}
|
|
<b>if</b>(y + h > vh+s.top){
|
|
y = vh - h;
|
|
moved = true;
|
|
}
|
|
<i>// then make sure top/left isn't negative</i>
|
|
<b>if</b>(x < s.left){
|
|
x = s.left;
|
|
moved = true;
|
|
}
|
|
<b>if</b>(y < s.top){
|
|
y = s.top;
|
|
moved = true;
|
|
}
|
|
<b>if</b>(moved){
|
|
<i>// cache xy</i>
|
|
<b>this</b>.xy = [x, y];
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.el.setLocation(x, y);
|
|
<b>this</b>.adjustAssets();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
onDrag : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.proxyDrag){
|
|
<b>this</b>.xy = <b>this</b>.el.getXY();
|
|
<b>this</b>.adjustAssets();
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
adjustAssets : <b>function</b>(doShow){
|
|
<b>var</b> x = <b>this</b>.xy[0], y = <b>this</b>.xy[1];
|
|
<b>var</b> w = <b>this</b>.size.width, h = <b>this</b>.size.height;
|
|
<b>if</b>(doShow === true){
|
|
<b>if</b>(this.shadow){
|
|
<b>this</b>.shadow.show(<b>this</b>.el);
|
|
}
|
|
<b>if</b>(this.shim){
|
|
<b>this</b>.shim.show();
|
|
}
|
|
}
|
|
<b>if</b>(this.shadow && <b>this</b>.shadow.isVisible()){
|
|
<b>this</b>.shadow.show(<b>this</b>.el);
|
|
}
|
|
<b>if</b>(this.shim && <b>this</b>.shim.isVisible()){
|
|
<b>this</b>.shim.setBounds(x, y, w, h);
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
adjustViewport : <b>function</b>(w, h){
|
|
<b>if</b>(!w || !h){
|
|
w = Ext.lib.Dom.getViewWidth();
|
|
h = Ext.lib.Dom.getViewHeight();
|
|
}
|
|
<i>// cache the size</i>
|
|
<b>this</b>.viewSize = [w, h];
|
|
<b>if</b>(this.modal && <b>this</b>.mask.isVisible()){
|
|
<b>this</b>.mask.setSize(w, h); <i>// first make sure the mask isn't causing overflow</i>
|
|
<b>this</b>.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
|
}
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.constrainXY();
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Destroys <b>this</b> dialog and all its supporting elements (including any tabs, shim,
|
|
* shadow, proxy, mask, etc.) Also removes all event listeners.
|
|
* @param {Boolean} removeEl (optional) true to remove the element from the DOM
|
|
*/</i>
|
|
destroy : <b>function</b>(removeEl){
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.animateTarget = null;
|
|
<b>this</b>.hide();
|
|
}
|
|
Ext.EventManager.removeResizeListener(<b>this</b>.adjustViewport, <b>this</b>);
|
|
<b>if</b>(this.tabs){
|
|
<b>this</b>.tabs.destroy(removeEl);
|
|
}
|
|
Ext.destroy(
|
|
<b>this</b>.shim,
|
|
<b>this</b>.proxy,
|
|
<b>this</b>.resizer,
|
|
<b>this</b>.close,
|
|
<b>this</b>.mask
|
|
);
|
|
<b>if</b>(this.dd){
|
|
<b>this</b>.dd.unreg();
|
|
}
|
|
<b>if</b>(this.buttons){
|
|
<b>for</b>(var i = 0, len = <b>this</b>.buttons.length; i < len; i++){
|
|
<b>this</b>.buttons[i].destroy();
|
|
}
|
|
}
|
|
<b>this</b>.el.removeAllListeners();
|
|
<b>if</b>(removeEl === true){
|
|
<b>this</b>.el.update("");
|
|
<b>this</b>.el.remove();
|
|
}
|
|
Ext.DialogManager.unregister(<b>this</b>);
|
|
},
|
|
|
|
<i>// private</i>
|
|
startMove : <b>function</b>(){
|
|
<b>if</b>(this.proxyDrag){
|
|
<b>this</b>.proxy.show();
|
|
}
|
|
<b>if</b>(this.constraintoviewport !== false){
|
|
<b>this</b>.dd.constrainTo(document.body, {right: <b>this</b>.shadowOffset, bottom: <b>this</b>.shadowOffset});
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
endMove : <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.proxyDrag){
|
|
Ext.dd.DD.prototype.endDrag.apply(<b>this</b>.dd, arguments);
|
|
}<b>else</b>{
|
|
Ext.dd.DDProxy.prototype.endDrag.apply(<b>this</b>.dd, arguments);
|
|
<b>this</b>.proxy.hide();
|
|
}
|
|
<b>this</b>.refreshSize();
|
|
<b>this</b>.adjustAssets();
|
|
<b>this</b>.focus();
|
|
<b>this</b>.fireEvent("move", <b>this</b>, <b>this</b>.xy[0], <b>this</b>.xy[1]);
|
|
},
|
|
|
|
<i>/**
|
|
* Brings <b>this</b> dialog to the front of any other visible dialogs
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
toFront : <b>function</b>(){
|
|
Ext.DialogManager.bringToFront(<b>this</b>);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Sends <b>this</b> dialog to the back (under) of any other visible dialogs
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
toBack : <b>function</b>(){
|
|
Ext.DialogManager.sendToBack(<b>this</b>);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Centers <b>this</b> dialog <b>in</b> the viewport
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
center : <b>function</b>(){
|
|
<b>var</b> xy = <b>this</b>.el.getCenterXY(true);
|
|
<b>this</b>.moveTo(xy[0], xy[1]);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Moves the dialog's top-left corner to the specified point
|
|
* @param {Number} x
|
|
* @param {Number} y
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
moveTo : <b>function</b>(x, y){
|
|
<b>this</b>.xy = [x,y];
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.el.setXY(<b>this</b>.xy);
|
|
<b>this</b>.adjustAssets();
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Aligns the dialog to the specified element
|
|
* @param {String/HTMLElement/Ext.Element} element The element to align to.
|
|
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} <b>for</b> more details).
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
alignTo : <b>function</b>(element, position, offsets){
|
|
<b>this</b>.xy = <b>this</b>.el.getAlignToXY(element, position, offsets);
|
|
<b>if</b>(this.isVisible()){
|
|
<b>this</b>.el.setXY(<b>this</b>.xy);
|
|
<b>this</b>.adjustAssets();
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Anchors an element to another element and realigns it when the window is resized.
|
|
* @param {String/HTMLElement/Ext.Element} element The element to align to.
|
|
* @param {String} position The position to align to (see {@link Ext.Element#alignTo} <b>for</b> more details)
|
|
* @param {Array} offsets (optional) Offset the positioning by [x, y]
|
|
* @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If <b>this</b> parameter
|
|
* is a number, it is used as the buffer delay (defaults to 50ms).
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
anchorTo : <b>function</b>(el, alignment, offsets, monitorScroll){
|
|
<b>var</b> action = <b>function</b>(){
|
|
<b>this</b>.alignTo(el, alignment, offsets);
|
|
};
|
|
Ext.EventManager.onWindowResize(action, <b>this</b>);
|
|
<b>var</b> tm = <b>typeof</b> monitorScroll;
|
|
<b>if</b>(tm != 'undefined'){
|
|
Ext.EventManager.on(window, 'scroll', action, <b>this</b>,
|
|
{buffer: tm == 'number' ? monitorScroll : 50});
|
|
}
|
|
action.call(<b>this</b>);
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> the dialog is visible
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isVisible : <b>function</b>(){
|
|
<b>return</b> this.el.isVisible();
|
|
},
|
|
|
|
<i>// private</i>
|
|
animHide : <b>function</b>(callback){
|
|
<b>var</b> b = Ext.get(<b>this</b>.animateTarget).getBox();
|
|
<b>this</b>.proxy.show();
|
|
<b>this</b>.proxy.setBounds(<b>this</b>.xy[0], <b>this</b>.xy[1], <b>this</b>.size.width, <b>this</b>.size.height);
|
|
<b>this</b>.el.hide();
|
|
<b>this</b>.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
|
|
<b>this</b>.hideEl.createDelegate(<b>this</b>, [callback]));
|
|
},
|
|
|
|
<i>/**
|
|
* Hides the dialog.
|
|
* @param {Function} callback (optional) Function to call when the dialog is hidden
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
hide : <b>function</b>(callback){
|
|
<b>if</b> (<b>this</b>.fireEvent("beforehide", <b>this</b>) === false){
|
|
<b>return</b>;
|
|
}
|
|
<b>if</b>(this.shadow){
|
|
<b>this</b>.shadow.hide();
|
|
}
|
|
<b>if</b>(this.shim) {
|
|
<b>this</b>.shim.hide();
|
|
}
|
|
<b>if</b>(this.animateTarget){
|
|
<b>this</b>.animHide(callback);
|
|
}<b>else</b>{
|
|
<b>this</b>.el.hide();
|
|
<b>this</b>.hideEl(callback);
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>// private</i>
|
|
hideEl : <b>function</b>(callback){
|
|
<b>this</b>.proxy.hide();
|
|
<b>if</b>(this.modal){
|
|
<b>this</b>.mask.hide();
|
|
Ext.get(document.body).removeClass("x-body-masked");
|
|
}
|
|
<b>this</b>.fireEvent("hide", <b>this</b>);
|
|
<b>if</b>(typeof callback == "<b>function</b>"){
|
|
callback();
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
hideAction : <b>function</b>(){
|
|
<b>this</b>.setLeft("-10000px");
|
|
<b>this</b>.setTop("-10000px");
|
|
<b>this</b>.setStyle("visibility", "hidden");
|
|
},
|
|
|
|
<i>// private</i>
|
|
refreshSize : <b>function</b>(){
|
|
<b>this</b>.size = <b>this</b>.el.getSize();
|
|
<b>this</b>.xy = <b>this</b>.el.getXY();
|
|
Ext.state.Manager.set(<b>this</b>.stateId || <b>this</b>.el.id + "-state", <b>this</b>.el.getBox());
|
|
},
|
|
|
|
<i>// private</i>
|
|
<i>// z-index is managed by the DialogManager and may be overwritten at any time</i>
|
|
setZIndex : <b>function</b>(index){
|
|
<b>if</b>(this.modal){
|
|
<b>this</b>.mask.setStyle("z-index", index);
|
|
}
|
|
<b>if</b>(this.shim){
|
|
<b>this</b>.shim.setStyle("z-index", ++index);
|
|
}
|
|
<b>if</b>(this.shadow){
|
|
<b>this</b>.shadow.setZIndex(++index);
|
|
}
|
|
<b>this</b>.el.setStyle("z-index", ++index);
|
|
<b>if</b>(this.proxy){
|
|
<b>this</b>.proxy.setStyle("z-index", ++index);
|
|
}
|
|
<b>if</b>(this.resizer){
|
|
<b>this</b>.resizer.proxy.setStyle("z-index", ++index);
|
|
}
|
|
|
|
<b>this</b>.lastZIndex = index;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns the element <b>for</b> this dialog
|
|
* @<b>return</b> {Ext.Element} The underlying dialog Element
|
|
*/</i>
|
|
getEl : <b>function</b>(){
|
|
<b>return</b> this.el;
|
|
}
|
|
});
|
|
|
|
<i>/**
|
|
* @class Ext.DialogManager
|
|
* Provides global access to BasicDialogs that have been created and
|
|
* support <b>for</b> z-indexing (layering) multiple open dialogs.
|
|
*/</i>
|
|
Ext.DialogManager = <b>function</b>(){
|
|
<b>var</b> list = {};
|
|
<b>var</b> accessList = [];
|
|
<b>var</b> front = null;
|
|
|
|
<i>// private</i>
|
|
<b>var</b> sortDialogs = <b>function</b>(d1, d2){
|
|
<b>return</b> (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
|
|
};
|
|
|
|
<i>// private</i>
|
|
<b>var</b> orderDialogs = <b>function</b>(){
|
|
accessList.sort(sortDialogs);
|
|
<b>var</b> seed = Ext.DialogManager.zseed;
|
|
<b>for</b>(var i = 0, len = accessList.length; i < len; i++){
|
|
<b>var</b> dlg = accessList[i];
|
|
<b>if</b>(dlg){
|
|
dlg.setZIndex(seed + (i*10));
|
|
}
|
|
}
|
|
};
|
|
|
|
<b>return</b> {
|
|
<i>/**
|
|
* The starting z-index <b>for</b> BasicDialogs (defaults to 9000)
|
|
* @type Number The z-index value
|
|
*/</i>
|
|
zseed : 9000,
|
|
|
|
<i>// private</i>
|
|
register : <b>function</b>(dlg){
|
|
list[dlg.id] = dlg;
|
|
accessList.push(dlg);
|
|
},
|
|
|
|
<i>// private</i>
|
|
unregister : <b>function</b>(dlg){
|
|
<b>delete</b> list[dlg.id];
|
|
<b>if</b>(!accessList.indexOf){
|
|
<b>for</b>(var i = 0, len = accessList.length; i < len; i++){
|
|
<b>if</b>(accessList[i] == dlg){
|
|
accessList.splice(i, 1);
|
|
<b>return</b>;
|
|
}
|
|
}
|
|
}<b>else</b>{
|
|
<b>var</b> i = accessList.indexOf(dlg);
|
|
<b>if</b>(i != -1){
|
|
accessList.splice(i, 1);
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Gets a registered dialog by id
|
|
* @param {String/Object} id The id of the dialog or a dialog
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
get : <b>function</b>(id){
|
|
<b>return</b> typeof id == "object" ? id : list[id];
|
|
},
|
|
|
|
<i>/**
|
|
* Brings the specified dialog to the front
|
|
* @param {String/Object} dlg The id of the dialog or a dialog
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
bringToFront : <b>function</b>(dlg){
|
|
dlg = <b>this</b>.get(dlg);
|
|
<b>if</b>(dlg != front){
|
|
front = dlg;
|
|
dlg._lastAccess = <b>new</b> Date().getTime();
|
|
orderDialogs();
|
|
}
|
|
<b>return</b> dlg;
|
|
},
|
|
|
|
<i>/**
|
|
* Sends the specified dialog to the back
|
|
* @param {String/Object} dlg The id of the dialog or a dialog
|
|
* @<b>return</b> {Ext.BasicDialog} <b>this</b>
|
|
*/</i>
|
|
sendToBack : <b>function</b>(dlg){
|
|
dlg = <b>this</b>.get(dlg);
|
|
dlg._lastAccess = -(<b>new</b> Date().getTime());
|
|
orderDialogs();
|
|
<b>return</b> dlg;
|
|
},
|
|
|
|
<i>/**
|
|
* Hides all dialogs
|
|
*/</i>
|
|
hideAll : <b>function</b>(){
|
|
<b>for</b>(var id <b>in</b> list){
|
|
<b>if</b>(list[id] && <b>typeof</b> list[id] != "<b>function</b>" && list[id].isVisible()){
|
|
list[id].hide();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}();
|
|
|
|
<i>/**
|
|
* @class Ext.LayoutDialog
|
|
* @extends Ext.BasicDialog
|
|
* Dialog which provides adjustments <b>for</b> working <b>with</b> a layout <b>in</b> a Dialog.
|
|
* Add your neccessary layout config options to the dialogs config.<br>
|
|
* Example Usage (including a nested layout):
|
|
* <pre><code> <b>if</b>(!dialog){
|
|
dialog = <b>new</b> Ext.LayoutDialog("download-dlg", {
|
|
modal: true,
|
|
width:600,
|
|
height:450,
|
|
shadow:true,
|
|
minWidth:500,
|
|
minHeight:350,
|
|
autoTabs:true,
|
|
proxyDrag:true,
|
|
<i>// layout config merges <b>with</b> the dialog config</i>
|
|
center:{
|
|
tabPosition: "top",
|
|
alwaysShowTabs: true
|
|
}
|
|
});
|
|
dialog.addKeyListener(27, dialog.hide, dialog);
|
|
dialog.setDefaultButton(dialog.addButton("Close", dialog.hide, dialog));
|
|
dialog.addButton("Build It!", <b>this</b>.getDownload, <b>this</b>);
|
|
|
|
<i>// we can even add nested layouts</i>
|
|
<b>var</b> innerLayout = <b>new</b> Ext.BorderLayout("dl-inner", {
|
|
east: {
|
|
initialSize: 200,
|
|
autoScroll:true,
|
|
split:true
|
|
},
|
|
center: {
|
|
autoScroll:true
|
|
}
|
|
});
|
|
innerLayout.beginUpdate();
|
|
innerLayout.add("east", <b>new</b> Ext.ContentPanel("dl-details"));
|
|
innerLayout.add("center", <b>new</b> Ext.ContentPanel("selection-panel"));
|
|
innerLayout.endUpdate(true);
|
|
|
|
<b>var</b> layout = dialog.getLayout();
|
|
layout.beginUpdate();
|
|
layout.add("center", <b>new</b> Ext.ContentPanel("standard-panel",
|
|
{title: "Download the Source", fitToFrame:true}));
|
|
layout.add("center", <b>new</b> Ext.NestedLayoutPanel(innerLayout,
|
|
{title: "Build your own ext.js"}));
|
|
layout.getRegion("center").showPanel(sp);
|
|
layout.endUpdate();</code></pre>
|
|
* @constructor
|
|
* @param {String/HTMLElement/Ext.Element} el The id of or container element
|
|
* @param {Object} config configuration options
|
|
*/</i>
|
|
Ext.LayoutDialog = <b>function</b>(el, config){
|
|
config.autoTabs = false;
|
|
Ext.LayoutDialog.superclass.constructor.call(<b>this</b>, el, config);
|
|
<b>this</b>.body.setStyle({overflow:"hidden", position:"relative"});
|
|
<b>this</b>.layout = <b>new</b> Ext.BorderLayout(<b>this</b>.body.dom, config);
|
|
<b>this</b>.layout.monitorWindowResize = false;
|
|
<b>this</b>.el.addClass("x-dlg-auto-layout");
|
|
<i>// fix <b>case</b> when center region overwrites center <b>function</b></i>
|
|
<b>this</b>.center = Ext.BasicDialog.prototype.center;
|
|
<b>this</b>.on("show", <b>this</b>.layout.layout, <b>this</b>.layout, true);
|
|
};
|
|
Ext.extend(Ext.LayoutDialog, Ext.BasicDialog, {
|
|
<i>/**
|
|
* Ends update of the layout <strike>and resets display to none</strike>. Use standard beginUpdate/endUpdate on the layout.
|
|
* @deprecated
|
|
*/</i>
|
|
endUpdate : <b>function</b>(){
|
|
<b>this</b>.layout.endUpdate();
|
|
},
|
|
|
|
<i>/**
|
|
* Begins an update of the layout <strike>and sets display to block and visibility to hidden</strike>. Use standard beginUpdate/endUpdate on the layout.
|
|
* @deprecated
|
|
*/</i>
|
|
beginUpdate : <b>function</b>(){
|
|
<b>this</b>.layout.beginUpdate();
|
|
},
|
|
|
|
<i>/**
|
|
* Get the BorderLayout <b>for</b> this dialog
|
|
* @<b>return</b> {Ext.BorderLayout}
|
|
*/</i>
|
|
getLayout : <b>function</b>(){
|
|
<b>return</b> this.layout;
|
|
},
|
|
|
|
showEl : <b>function</b>(){
|
|
Ext.LayoutDialog.superclass.showEl.apply(<b>this</b>, arguments);
|
|
<b>if</b>(Ext.isIE7){
|
|
<b>this</b>.layout.layout();
|
|
}
|
|
},
|
|
|
|
<i>// private</i>
|
|
<i>// Use the syncHeightBeforeShow config option to control <b>this</b> automatically</i>
|
|
syncBodyHeight : <b>function</b>(){
|
|
Ext.LayoutDialog.superclass.syncBodyHeight.call(<b>this</b>);
|
|
<b>if</b>(this.layout){<b>this</b>.layout.layout();}
|
|
}
|
|
});</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |