X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/pkgs/window-debug.js?ds=sidebyside diff --git a/pkgs/window-debug.js b/pkgs/window-debug.js deleted file mode 100644 index b58ec94a..00000000 --- a/pkgs/window-debug.js +++ /dev/null @@ -1,1888 +0,0 @@ -/*! - * Ext JS Library 3.0.0 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** - * @class Ext.Window - * @extends Ext.Panel - *

A specialized panel intended for use as an application window. Windows are floated, {@link #resizable}, and - * {@link #draggable} by default. Windows can be {@link #maximizable maximized} to fill the viewport, - * restored to their prior size, and can be {@link #minimize}d.

- *

Windows can also be linked to a {@link Ext.WindowGroup} or managed by the {@link Ext.WindowMgr} to provide - * grouping, activation, to front, to back and other application-specific behavior.

- *

By default, Windows will be rendered to document.body. To {@link #constrain} a Window to another element - * specify {@link Ext.Component#renderTo renderTo}.

- *

Note: By default, the {@link #closable close} header tool destroys the Window resulting in - * destruction of any child Components. This makes the Window object, and all its descendants unusable. To enable - * re-use of a Window, use {@link #closeAction closeAction: 'hide'}.

- * @constructor - * @param {Object} config The config object - * @xtype window - */ -Ext.Window = Ext.extend(Ext.Panel, { - /** - * @cfg {Number} x - * The X position of the left edge of the window on initial showing. Defaults to centering the Window within - * the width of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). - */ - /** - * @cfg {Number} y - * The Y position of the top edge of the window on initial showing. Defaults to centering the Window within - * the height of the Window's container {@link Ext.Element Element) (The Element that the Window is rendered to). - */ - /** - * @cfg {Boolean} modal - * True to make the window modal and mask everything behind it when displayed, false to display it without - * restricting access to other UI elements (defaults to false). - */ - /** - * @cfg {String/Element} animateTarget - * Id or element from which the window should animate while opening (defaults to null with no animation). - */ - /** - * @cfg {String} resizeHandles - * A valid {@link Ext.Resizable} handles config string (defaults to 'all'). Only applies when resizable = true. - */ - /** - * @cfg {Ext.WindowGroup} manager - * A reference to the WindowGroup that should manage this window (defaults to {@link Ext.WindowMgr}). - */ - /** - * @cfg {String/Number/Button} defaultButton - * The id / index of a button or a button instance to focus when this window received the focus. - */ - /** - * @cfg {Function} onEsc - * Allows override of the built-in processing for the escape key. Default action - * is to close the Window (performing whatever action is specified in {@link #closeAction}. - * To prevent the Window closing when the escape key is pressed, specify this as - * Ext.emptyFn (See {@link Ext#emptyFn}). - */ - /** - * @cfg {Boolean} collapsed - * True to render the window collapsed, false to render it expanded (defaults to false). Note that if - * {@link #expandOnShow} is true (the default) it will override the collapsed config and the window - * will always be expanded when shown. - */ - /** - * @cfg {Boolean} maximized - * True to initially display the window in a maximized state. (Defaults to false). - */ - - /** - * @cfg {String} baseCls - * The base CSS class to apply to this panel's element (defaults to 'x-window'). - */ - baseCls : 'x-window', - /** - * @cfg {Boolean} resizable - * True to allow user resizing at each edge and corner of the window, false to disable resizing (defaults to true). - */ - resizable : true, - /** - * @cfg {Boolean} draggable - * True to allow the window to be dragged by the header bar, false to disable dragging (defaults to true). Note - * that by default the window will be centered in the viewport, so if dragging is disabled the window may need - * to be positioned programmatically after render (e.g., myWindow.setPosition(100, 100);). - */ - draggable : true, - /** - * @cfg {Boolean} closable - *

True to display the 'close' tool button and allow the user to close the window, false to - * hide the button and disallow closing the window (defaults to true).

- *

By default, when close is requested by either clicking the close button in the header - * or pressing ESC when the Window has focus, the {@link #close} method will be called. This - * will {@link Ext.Component#destroy destroy} the Window and its content meaning that - * it may not be reused.

- *

To make closing a Window hide the Window so that it may be reused, set - * {@link #closeAction} to 'hide'. - */ - closable : true, - /** - * @cfg {String} closeAction - *

The action to take when the close header tool is clicked: - *

- *

Note: This setting does not affect the {@link #close} method - * which will always {@link Ext.Component#destroy destroy} the window. To - * programatically hide a window, call {@link #hide}.

- */ - closeAction : 'close', - /** - * @cfg {Boolean} constrain - * True to constrain the window within its containing element, false to allow it to fall outside of its - * containing element. By default the window will be rendered to document.body. To render and constrain the - * window within another element specify {@link #renderTo}. - * (defaults to false). Optionally the header only can be constrained using {@link #constrainHeader}. - */ - constrain : false, - /** - * @cfg {Boolean} constrainHeader - * True to constrain the window header within its containing element (allowing the window body to fall outside - * of its containing element) or false to allow the header to fall outside its containing element (defaults to - * false). Optionally the entire window can be constrained using {@link #constrain}. - */ - constrainHeader : false, - /** - * @cfg {Boolean} plain - * True to render the window body with a transparent background so that it will blend into the framing - * elements, false to add a lighter background color to visually highlight the body element and separate it - * more distinctly from the surrounding frame (defaults to false). - */ - plain : false, - /** - * @cfg {Boolean} minimizable - * True to display the 'minimize' tool button and allow the user to minimize the window, false to hide the button - * and disallow minimizing the window (defaults to false). Note that this button provides no implementation -- - * the behavior of minimizing a window is implementation-specific, so the minimize event must be handled and a - * custom minimize behavior implemented for this option to be useful. - */ - minimizable : false, - /** - * @cfg {Boolean} maximizable - * True to display the 'maximize' tool button and allow the user to maximize the window, false to hide the button - * and disallow maximizing the window (defaults to false). Note that when a window is maximized, the tool button - * will automatically change to a 'restore' button with the appropriate behavior already built-in that will - * restore the window to its previous size. - */ - maximizable : false, - /** - * @cfg {Number} minHeight - * The minimum height in pixels allowed for this window (defaults to 100). Only applies when resizable = true. - */ - minHeight : 100, - /** - * @cfg {Number} minWidth - * The minimum width in pixels allowed for this window (defaults to 200). Only applies when resizable = true. - */ - minWidth : 200, - /** - * @cfg {Boolean} expandOnShow - * True to always expand the window when it is displayed, false to keep it in its current state (which may be - * {@link #collapsed}) when displayed (defaults to true). - */ - expandOnShow : true, - - // inherited docs, same default - collapsible : false, - - /** - * @cfg {Boolean} initHidden - * True to hide the window until show() is explicitly called (defaults to true). - */ - initHidden : true, - /** - * @cfg {Boolean} monitorResize @hide - * This is automatically managed based on the value of constrain and constrainToHeader - */ - monitorResize : true, - - // The following configs are set to provide the basic functionality of a window. - // Changing them would require additional code to handle correctly and should - // usually only be done in subclasses that can provide custom behavior. Changing them - // may have unexpected or undesirable results. - /** @cfg {String} elements @hide */ - elements : 'header,body', - /** @cfg {Boolean} frame @hide */ - frame : true, - /** @cfg {Boolean} floating @hide */ - floating : true, - - // private - initComponent : function(){ - Ext.Window.superclass.initComponent.call(this); - this.addEvents( - /** - * @event activate - * Fires after the window has been visually activated via {@link setActive}. - * @param {Ext.Window} this - */ - /** - * @event deactivate - * Fires after the window has been visually deactivated via {@link setActive}. - * @param {Ext.Window} this - */ - /** - * @event resize - * Fires after the window has been resized. - * @param {Ext.Window} this - * @param {Number} width The window's new width - * @param {Number} height The window's new height - */ - 'resize', - /** - * @event maximize - * Fires after the window has been maximized. - * @param {Ext.Window} this - */ - 'maximize', - /** - * @event minimize - * Fires after the window has been minimized. - * @param {Ext.Window} this - */ - 'minimize', - /** - * @event restore - * Fires after the window has been restored to its original size after being maximized. - * @param {Ext.Window} this - */ - 'restore' - ); - if(this.initHidden === false){ - this.show(); - }else{ - this.hidden = true; - } - }, - - // private - getState : function(){ - return Ext.apply(Ext.Window.superclass.getState.call(this) || {}, this.getBox(true)); - }, - - // private - onRender : function(ct, position){ - Ext.Window.superclass.onRender.call(this, ct, position); - - if(this.plain){ - this.el.addClass('x-window-plain'); - } - - // this element allows the Window to be focused for keyboard events - this.focusEl = this.el.createChild({ - tag: 'a', href:'#', cls:'x-dlg-focus', - tabIndex:'-1', html: ' '}); - this.focusEl.swallowEvent('click', true); - - this.proxy = this.el.createProxy('x-window-proxy'); - this.proxy.enableDisplayMode('block'); - - if(this.modal){ - this.mask = this.container.createChild({cls:'ext-el-mask'}, this.el.dom); - this.mask.enableDisplayMode('block'); - this.mask.hide(); - this.mon(this.mask, 'click', this.focus, this); - } - this.initTools(); - }, - - // private - initEvents : function(){ - Ext.Window.superclass.initEvents.call(this); - if(this.animateTarget){ - this.setAnimateTarget(this.animateTarget); - } - - if(this.resizable){ - this.resizer = new Ext.Resizable(this.el, { - minWidth: this.minWidth, - minHeight:this.minHeight, - handles: this.resizeHandles || 'all', - pinned: true, - resizeElement : this.resizerAction - }); - this.resizer.window = this; - this.mon(this.resizer, 'beforeresize', this.beforeResize, this); - } - - if(this.draggable){ - this.header.addClass('x-window-draggable'); - } - this.mon(this.el, 'mousedown', this.toFront, this); - this.manager = this.manager || Ext.WindowMgr; - this.manager.register(this); - if(this.maximized){ - this.maximized = false; - this.maximize(); - } - if(this.closable){ - var km = this.getKeyMap(); - km.on(27, this.onEsc, this); - km.disable(); - } - }, - - initDraggable : function(){ - /** - * If this Window is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element. - * @type Ext.dd.DD - * @property dd - */ - this.dd = new Ext.Window.DD(this); - }, - - // private - onEsc : function(){ - this[this.closeAction](); - }, - - // private - beforeDestroy : function(){ - if (this.rendered){ - this.hide(); - if(this.doAnchor){ - Ext.EventManager.removeResizeListener(this.doAnchor, this); - Ext.EventManager.un(window, 'scroll', this.doAnchor, this); - } - Ext.destroy( - this.focusEl, - this.resizer, - this.dd, - this.proxy, - this.mask - ); - } - Ext.Window.superclass.beforeDestroy.call(this); - }, - - // private - onDestroy : function(){ - if(this.manager){ - this.manager.unregister(this); - } - Ext.Window.superclass.onDestroy.call(this); - }, - - // private - initTools : function(){ - if(this.minimizable){ - this.addTool({ - id: 'minimize', - handler: this.minimize.createDelegate(this, []) - }); - } - if(this.maximizable){ - this.addTool({ - id: 'maximize', - handler: this.maximize.createDelegate(this, []) - }); - this.addTool({ - id: 'restore', - handler: this.restore.createDelegate(this, []), - hidden:true - }); - this.mon(this.header, 'dblclick', this.toggleMaximize, this); - } - if(this.closable){ - this.addTool({ - id: 'close', - handler: this[this.closeAction].createDelegate(this, []) - }); - } - }, - - // private - resizerAction : function(){ - var box = this.proxy.getBox(); - this.proxy.hide(); - this.window.handleResize(box); - return box; - }, - - // private - beforeResize : function(){ - this.resizer.minHeight = Math.max(this.minHeight, this.getFrameHeight() + 40); // 40 is a magic minimum content size? - this.resizer.minWidth = Math.max(this.minWidth, this.getFrameWidth() + 40); - this.resizeBox = this.el.getBox(); - }, - - // private - updateHandles : function(){ - if(Ext.isIE && this.resizer){ - this.resizer.syncHandleHeight(); - this.el.repaint(); - } - }, - - // private - handleResize : function(box){ - var rz = this.resizeBox; - if(rz.x != box.x || rz.y != box.y){ - this.updateBox(box); - }else{ - this.setSize(box); - } - this.focus(); - this.updateHandles(); - this.saveState(); - this.doLayout(); - this.fireEvent('resize', this, box.width, box.height); - }, - - /** - * Focuses the window. If a defaultButton is set, it will receive focus, otherwise the - * window itself will receive focus. - */ - focus : function(){ - var f = this.focusEl, db = this.defaultButton, t = typeof db; - if(t != 'undefined'){ - if(t == 'number' && this.fbar){ - f = this.fbar.items.get(db); - }else if(t == 'string'){ - f = Ext.getCmp(db); - }else{ - f = db; - } - } - f = f || this.focusEl; - f.focus.defer(10, f); - }, - - /** - * Sets the target element from which the window should animate while opening. - * @param {String/Element} el The target element or id - */ - setAnimateTarget : function(el){ - el = Ext.get(el); - this.animateTarget = el; - }, - - // private - beforeShow : function(){ - delete this.el.lastXY; - delete this.el.lastLT; - if(this.x === undefined || this.y === undefined){ - var xy = this.el.getAlignToXY(this.container, 'c-c'); - var pos = this.el.translatePoints(xy[0], xy[1]); - this.x = this.x === undefined? pos.left : this.x; - this.y = this.y === undefined? pos.top : this.y; - } - this.el.setLeftTop(this.x, this.y); - - if(this.expandOnShow){ - this.expand(false); - } - - if(this.modal){ - Ext.getBody().addClass('x-body-masked'); - this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); - this.mask.show(); - } - }, - - /** - * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden. - * @param {String/Element} animateTarget (optional) The target element or id from which the window should - * animate while opening (defaults to null with no animation) - * @param {Function} callback (optional) A callback function to call after the window is displayed - * @param {Object} scope (optional) The scope in which to execute the callback - * @return {Ext.Window} this - */ - show : function(animateTarget, cb, scope){ - if(!this.rendered){ - this.render(Ext.getBody()); - } - if(this.hidden === false){ - this.toFront(); - return this; - } - if(this.fireEvent('beforeshow', this) === false){ - return this; - } - if(cb){ - this.on('show', cb, scope, {single:true}); - } - this.hidden = false; - if(animateTarget !== undefined){ - this.setAnimateTarget(animateTarget); - } - this.beforeShow(); - if(this.animateTarget){ - this.animShow(); - }else{ - this.afterShow(); - } - return this; - }, - - // private - afterShow : function(isAnim){ - this.proxy.hide(); - this.el.setStyle('display', 'block'); - this.el.show(); - if(this.maximized){ - this.fitContainer(); - } - if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug - this.cascade(this.setAutoScroll); - } - - if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ - Ext.EventManager.onWindowResize(this.onWindowResize, this); - } - this.doConstrain(); - this.doLayout(); - if(this.keyMap){ - this.keyMap.enable(); - } - this.toFront(); - this.updateHandles(); - if(isAnim && (Ext.isIE || Ext.isWebKit)){ - var sz = this.getSize(); - this.onResize(sz.width, sz.height); - } - this.fireEvent('show', this); - }, - - // private - animShow : function(){ - this.proxy.show(); - this.proxy.setBox(this.animateTarget.getBox()); - this.proxy.setOpacity(0); - var b = this.getBox(false); - b.callback = this.afterShow.createDelegate(this, [true], false); - b.scope = this; - b.duration = 0.25; - b.easing = 'easeNone'; - b.opacity = 0.5; - b.block = true; - this.el.setStyle('display', 'none'); - this.proxy.shift(b); - }, - - /** - * Hides the window, setting it to invisible and applying negative offsets. - * @param {String/Element} animateTarget (optional) The target element or id to which the window should - * animate while hiding (defaults to null with no animation) - * @param {Function} callback (optional) A callback function to call after the window is hidden - * @param {Object} scope (optional) The scope in which to execute the callback - * @return {Ext.Window} this - */ - hide : function(animateTarget, cb, scope){ - if(this.hidden || this.fireEvent('beforehide', this) === false){ - return this; - } - if(cb){ - this.on('hide', cb, scope, {single:true}); - } - this.hidden = true; - if(animateTarget !== undefined){ - this.setAnimateTarget(animateTarget); - } - if(this.modal){ - this.mask.hide(); - Ext.getBody().removeClass('x-body-masked'); - } - if(this.animateTarget){ - this.animHide(); - }else{ - this.el.hide(); - this.afterHide(); - } - return this; - }, - - // private - afterHide : function(){ - this.proxy.hide(); - if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){ - Ext.EventManager.removeResizeListener(this.onWindowResize, this); - } - if(this.keyMap){ - this.keyMap.disable(); - } - this.fireEvent('hide', this); - }, - - // private - animHide : function(){ - this.proxy.setOpacity(0.5); - this.proxy.show(); - var tb = this.getBox(false); - this.proxy.setBox(tb); - this.el.hide(); - var b = this.animateTarget.getBox(); - b.callback = this.afterHide; - b.scope = this; - b.duration = 0.25; - b.easing = 'easeNone'; - b.block = true; - b.opacity = 0; - this.proxy.shift(b); - }, - - // private - onWindowResize : function(){ - if(this.maximized){ - this.fitContainer(); - } - if(this.modal){ - this.mask.setSize('100%', '100%'); - var force = this.mask.dom.offsetHeight; - this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true)); - } - this.doConstrain(); - }, - - // private - doConstrain : function(){ - if(this.constrain || this.constrainHeader){ - var offsets; - if(this.constrain){ - offsets = { - right:this.el.shadowOffset, - left:this.el.shadowOffset, - bottom:this.el.shadowOffset - }; - }else { - var s = this.getSize(); - offsets = { - right:-(s.width - 100), - bottom:-(s.height - 25) - }; - } - - var xy = this.el.getConstrainToXY(this.container, true, offsets); - if(xy){ - this.setPosition(xy[0], xy[1]); - } - } - }, - - // private - used for dragging - ghost : function(cls){ - var ghost = this.createGhost(cls); - var box = this.getBox(true); - ghost.setLeftTop(box.x, box.y); - ghost.setWidth(box.width); - this.el.hide(); - this.activeGhost = ghost; - return ghost; - }, - - // private - unghost : function(show, matchPosition){ - if(!this.activeGhost) { - return; - } - if(show !== false){ - this.el.show(); - this.focus(); - if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug - this.cascade(this.setAutoScroll); - } - } - if(matchPosition !== false){ - this.setPosition(this.activeGhost.getLeft(true), this.activeGhost.getTop(true)); - } - this.activeGhost.hide(); - this.activeGhost.remove(); - delete this.activeGhost; - }, - - /** - * Placeholder method for minimizing the window. By default, this method simply fires the {@link #minimize} event - * since the behavior of minimizing a window is application-specific. To implement custom minimize behavior, - * either the minimize event can be handled or this method can be overridden. - * @return {Ext.Window} this - */ - minimize : function(){ - this.fireEvent('minimize', this); - return this; - }, - - /** - *

Closes the Window, removes it from the DOM, {@link Ext.Component#destroy destroy}s - * the Window object and all its descendant Components. The {@link Ext.Panel#beforeclose beforeclose} - * event is fired before the close happens and will cancel the close action if it returns false.

- *

Note: This method is not affected by the {@link #closeAction} setting which - * only affects the action triggered when clicking the {@link #closable 'close' tool in the header}. - * To hide the Window without destroying it, call {@link #hide}.

- */ - close : function(){ - if(this.fireEvent('beforeclose', this) !== false){ - this.hide(null, function(){ - this.fireEvent('close', this); - this.destroy(); - }, this); - } - }, - - /** - * Fits the window within its current container and automatically replaces - * the {@link #maximizable 'maximize' tool button} with the 'restore' tool button. - * Also see {@link #toggleMaximize}. - * @return {Ext.Window} this - */ - maximize : function(){ - if(!this.maximized){ - this.expand(false); - this.restoreSize = this.getSize(); - this.restorePos = this.getPosition(true); - if (this.maximizable){ - this.tools.maximize.hide(); - this.tools.restore.show(); - } - this.maximized = true; - this.el.disableShadow(); - - if(this.dd){ - this.dd.lock(); - } - if(this.collapsible){ - this.tools.toggle.hide(); - } - this.el.addClass('x-window-maximized'); - this.container.addClass('x-window-maximized-ct'); - - this.setPosition(0, 0); - this.fitContainer(); - this.fireEvent('maximize', this); - } - return this; - }, - - /** - * Restores a {@link #maximizable maximized} window back to its original - * size and position prior to being maximized and also replaces - * the 'restore' tool button with the 'maximize' tool button. - * Also see {@link #toggleMaximize}. - * @return {Ext.Window} this - */ - restore : function(){ - if(this.maximized){ - this.el.removeClass('x-window-maximized'); - this.tools.restore.hide(); - this.tools.maximize.show(); - this.setPosition(this.restorePos[0], this.restorePos[1]); - this.setSize(this.restoreSize.width, this.restoreSize.height); - delete this.restorePos; - delete this.restoreSize; - this.maximized = false; - this.el.enableShadow(true); - - if(this.dd){ - this.dd.unlock(); - } - if(this.collapsible){ - this.tools.toggle.show(); - } - this.container.removeClass('x-window-maximized-ct'); - - this.doConstrain(); - this.fireEvent('restore', this); - } - return this; - }, - - /** - * A shortcut method for toggling between {@link #maximize} and {@link #restore} based on the current maximized - * state of the window. - * @return {Ext.Window} this - */ - toggleMaximize : function(){ - return this[this.maximized ? 'restore' : 'maximize'](); - }, - - // private - fitContainer : function(){ - var vs = this.container.getViewSize(); - this.setSize(vs.width, vs.height); - }, - - // private - // z-index is managed by the WindowManager and may be overwritten at any time - setZIndex : function(index){ - if(this.modal){ - this.mask.setStyle('z-index', index); - } - this.el.setZIndex(++index); - index += 5; - - if(this.resizer){ - this.resizer.proxy.setStyle('z-index', ++index); - } - - this.lastZIndex = index; - }, - - /** - * Aligns the window to the specified element - * @param {Mixed} element The element to align to. - * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for more details). - * @param {Array} offsets (optional) Offset the positioning by [x, y] - * @return {Ext.Window} this - */ - alignTo : function(element, position, offsets){ - var xy = this.el.getAlignToXY(element, position, offsets); - this.setPagePosition(xy[0], xy[1]); - return this; - }, - - /** - * Anchors this window to another element and realigns it when the window is resized or scrolled. - * @param {Mixed} element The element to align to. - * @param {String} position The position to align to (see {@link Ext.Element#alignTo} for 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 this parameter - * is a number, it is used as the buffer delay (defaults to 50ms). - * @return {Ext.Window} this - */ - anchorTo : function(el, alignment, offsets, monitorScroll){ - if(this.doAnchor){ - Ext.EventManager.removeResizeListener(this.doAnchor, this); - Ext.EventManager.un(window, 'scroll', this.doAnchor, this); - } - this.doAnchor = function(){ - this.alignTo(el, alignment, offsets); - }; - Ext.EventManager.onWindowResize(this.doAnchor, this); - - var tm = typeof monitorScroll; - if(tm != 'undefined'){ - Ext.EventManager.on(window, 'scroll', this.doAnchor, this, - {buffer: tm == 'number' ? monitorScroll : 50}); - } - this.doAnchor(); - return this; - }, - - /** - * Brings this window to the front of any other visible windows - * @param {Boolean} e (optional) Specify false to prevent the window from being focused. - * @return {Ext.Window} this - */ - toFront : function(e){ - if(this.manager.bringToFront(this)){ - if(!e || !e.getTarget().focus){ - this.focus(); - } - } - return this; - }, - - /** - * Makes this the active window by showing its shadow, or deactivates it by hiding its shadow. This method also - * fires the {@link #activate} or {@link #deactivate} event depending on which action occurred. - * @param {Boolean} active True to activate the window, false to deactivate it (defaults to false) - */ - setActive : function(active){ - if(active){ - if(!this.maximized){ - this.el.enableShadow(true); - } - this.fireEvent('activate', this); - }else{ - this.el.disableShadow(); - this.fireEvent('deactivate', this); - } - }, - - /** - * Sends this window to the back of (lower z-index than) any other visible windows - * @return {Ext.Window} this - */ - toBack : function(){ - this.manager.sendToBack(this); - return this; - }, - - /** - * Centers this window in the viewport - * @return {Ext.Window} this - */ - center : function(){ - var xy = this.el.getAlignToXY(this.container, 'c-c'); - this.setPagePosition(xy[0], xy[1]); - return this; - } - - /** - * @cfg {Boolean} autoWidth @hide - **/ -}); -Ext.reg('window', Ext.Window); - -// private - custom Window DD implementation -Ext.Window.DD = function(win){ - this.win = win; - Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); - this.setHandleElId(win.header.id); - this.scroll = false; -}; - -Ext.extend(Ext.Window.DD, Ext.dd.DD, { - moveOnly:true, - headerOffsets:[100, 25], - startDrag : function(){ - var w = this.win; - this.proxy = w.ghost(); - if(w.constrain !== false){ - var so = w.el.shadowOffset; - this.constrainTo(w.container, {right: so, left: so, bottom: so}); - }else if(w.constrainHeader !== false){ - var s = this.proxy.getSize(); - this.constrainTo(w.container, {right: -(s.width-this.headerOffsets[0]), bottom: -(s.height-this.headerOffsets[1])}); - } - }, - b4Drag : Ext.emptyFn, - - onDrag : function(e){ - this.alignElWithMouse(this.proxy, e.getPageX(), e.getPageY()); - }, - - endDrag : function(e){ - this.win.unghost(); - this.win.saveState(); - } -}); -/** - * @class Ext.WindowGroup - * An object that represents a group of {@link Ext.Window} instances and provides z-order management - * and window activation behavior. - * @constructor - */ -Ext.WindowGroup = function(){ - var list = {}; - var accessList = []; - var front = null; - - // private - var sortWindows = function(d1, d2){ - return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1; - }; - - // private - var orderWindows = function(){ - var a = accessList, len = a.length; - if(len > 0){ - a.sort(sortWindows); - var seed = a[0].manager.zseed; - for(var i = 0; i < len; i++){ - var win = a[i]; - if(win && !win.hidden){ - win.setZIndex(seed + (i*10)); - } - } - } - activateLast(); - }; - - // private - var setActiveWin = function(win){ - if(win != front){ - if(front){ - front.setActive(false); - } - front = win; - if(win){ - win.setActive(true); - } - } - }; - - // private - var activateLast = function(){ - for(var i = accessList.length-1; i >=0; --i) { - if(!accessList[i].hidden){ - setActiveWin(accessList[i]); - return; - } - } - // none to activate - setActiveWin(null); - }; - - return { - /** - * The starting z-index for windows (defaults to 9000) - * @type Number The z-index value - */ - zseed : 9000, - - // private - register : function(win){ - list[win.id] = win; - accessList.push(win); - win.on('hide', activateLast); - }, - - // private - unregister : function(win){ - delete list[win.id]; - win.un('hide', activateLast); - accessList.remove(win); - }, - - /** - * Gets a registered window by id. - * @param {String/Object} id The id of the window or a {@link Ext.Window} instance - * @return {Ext.Window} - */ - get : function(id){ - return typeof id == "object" ? id : list[id]; - }, - - /** - * Brings the specified window to the front of any other active windows. - * @param {String/Object} win The id of the window or a {@link Ext.Window} instance - * @return {Boolean} True if the dialog was brought to the front, else false - * if it was already in front - */ - bringToFront : function(win){ - win = this.get(win); - if(win != front){ - win._lastAccess = new Date().getTime(); - orderWindows(); - return true; - } - return false; - }, - - /** - * Sends the specified window to the back of other active windows. - * @param {String/Object} win The id of the window or a {@link Ext.Window} instance - * @return {Ext.Window} The window - */ - sendToBack : function(win){ - win = this.get(win); - win._lastAccess = -(new Date().getTime()); - orderWindows(); - return win; - }, - - /** - * Hides all windows in the group. - */ - hideAll : function(){ - for(var id in list){ - if(list[id] && typeof list[id] != "function" && list[id].isVisible()){ - list[id].hide(); - } - } - }, - - /** - * Gets the currently-active window in the group. - * @return {Ext.Window} The active window - */ - getActive : function(){ - return front; - }, - - /** - * Returns zero or more windows in the group using the custom search function passed to this method. - * The function should accept a single {@link Ext.Window} reference as its only argument and should - * return true if the window matches the search criteria, otherwise it should return false. - * @param {Function} fn The search function - * @param {Object} scope (optional) The scope in which to execute the function (defaults to the window - * that gets passed to the function if not specified) - * @return {Array} An array of zero or more matching windows - */ - getBy : function(fn, scope){ - var r = []; - for(var i = accessList.length-1; i >=0; --i) { - var win = accessList[i]; - if(fn.call(scope||win, win) !== false){ - r.push(win); - } - } - return r; - }, - - /** - * Executes the specified function once for every window in the group, passing each - * window as the only parameter. Returning false from the function will stop the iteration. - * @param {Function} fn The function to execute for each item - * @param {Object} scope (optional) The scope in which to execute the function - */ - each : function(fn, scope){ - for(var id in list){ - if(list[id] && typeof list[id] != "function"){ - if(fn.call(scope || list[id], list[id]) === false){ - return; - } - } - } - } - }; -}; - - -/** - * @class Ext.WindowMgr - * @extends Ext.WindowGroup - * The default global window group that is available automatically. To have more than one group of windows - * with separate z-order stacks, create additional instances of {@link Ext.WindowGroup} as needed. - * @singleton - */ -Ext.WindowMgr = new Ext.WindowGroup();/** - * @class Ext.MessageBox - *

Utility class for generating different styles of message boxes. The alias Ext.Msg can also be used.

- *

Note that the MessageBox is asynchronous. Unlike a regular JavaScript alert (which will halt - * browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code - * that should only run after some user feedback from the MessageBox, you must use a callback function - * (see the function parameter for {@link #show} for more details).

- *

Example usage:

- *

-// Basic alert:
-Ext.Msg.alert('Status', 'Changes saved successfully.');
-
-// Prompt for user data and process the result using a callback:
-Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
-    if (btn == 'ok'){
-        // process text value and close...
-    }
-});
-
-// Show a dialog using config options:
-Ext.Msg.show({
-   title:'Save Changes?',
-   msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
-   buttons: Ext.Msg.YESNOCANCEL,
-   fn: processResult,
-   animEl: 'elId',
-   icon: Ext.MessageBox.QUESTION
-});
-
- * @singleton - */ -Ext.MessageBox = function(){ - var dlg, opt, mask, waitTimer; - var bodyEl, msgEl, textboxEl, textareaEl, progressBar, pp, iconEl, spacerEl; - var buttons, activeTextEl, bwidth, iconCls = ''; - - // private - var handleButton = function(button){ - if(dlg.isVisible()){ - dlg.hide(); - handleHide(); - Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1); - } - }; - - // private - var handleHide = function(){ - if(opt && opt.cls){ - dlg.el.removeClass(opt.cls); - } - progressBar.reset(); - }; - - // private - var handleEsc = function(d, k, e){ - if(opt && opt.closable !== false){ - dlg.hide(); - handleHide(); - } - if(e){ - e.stopEvent(); - } - }; - - // private - var updateButtons = function(b){ - var width = 0; - if(!b){ - buttons["ok"].hide(); - buttons["cancel"].hide(); - buttons["yes"].hide(); - buttons["no"].hide(); - 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; - }; - - return { - /** - * Returns a reference to the underlying {@link Ext.Window} element - * @return {Ext.Window} The window - */ - getDialog : function(titleText){ - if(!dlg){ - dlg = new Ext.Window({ - autoCreate : true, - title:titleText, - resizable:false, - constrain:true, - constrainHeader:true, - minimizable : false, - maximizable : false, - stateful: false, - modal: true, - shim:true, - buttonAlign:"center", - width:400, - height:100, - minHeight: 80, - plain:true, - footer:true, - closable:true, - close : function(){ - if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){ - handleButton("no"); - }else{ - handleButton("cancel"); - } - } - }); - buttons = {}; - var bt = this.buttonText; - //TODO: refactor this block into a buttons config to pass into the Window constructor - 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")); - buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets'; - dlg.render(document.body); - dlg.getEl().addClass('x-window-dlg'); - mask = dlg.mask; - bodyEl = dlg.body.createChild({ - html:'

' - }); - iconEl = Ext.get(bodyEl.dom.firstChild); - var contentEl = bodyEl.dom.childNodes[1]; - msgEl = Ext.get(contentEl.firstChild); - textboxEl = Ext.get(contentEl.childNodes[2].firstChild); - 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(contentEl.childNodes[2].childNodes[1]); - textareaEl.enableDisplayMode(); - progressBar = new Ext.ProgressBar({ - renderTo:bodyEl - }); - bodyEl.createChild({cls:'x-clear'}); - } - return dlg; - }, - - /** - * Updates the message box body text - * @param {String} text (optional) Replaces the message box element's innerHTML with the specified string (defaults to - * the XHTML-compliant non-breaking space character '&#160;') - * @return {Ext.MessageBox} this - */ - updateText : function(text){ - if(!dlg.isVisible() && !opt.width){ - dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows - } - msgEl.update(text || ' '); - - var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0; - var mw = msgEl.getWidth() + msgEl.getMargins('lr'); - var fw = dlg.getFrameWidth('lr'); - var bw = dlg.body.getFrameWidth('lr'); - if (Ext.isIE && iw > 0){ - //3 pixels get subtracted in the icon CSS for an IE margin issue, - //so we have to add it back here for the overall width to be consistent - iw += 3; - } - var w = Math.max(Math.min(opt.width || iw+mw+fw+bw, this.maxWidth), - Math.max(opt.minWidth || this.minWidth, bwidth || 0)); - - if(opt.prompt === true){ - activeTextEl.setWidth(w-iw-fw-bw); - } - if(opt.progress === true || opt.wait === true){ - progressBar.setSize(w-iw-fw-bw); - } - if(Ext.isIE && w == bwidth){ - w += 4; //Add offset when the content width is smaller than the buttons. - } - dlg.setSize(w, 'auto').center(); - 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 {@link Ext.MessageBox#wait}, - * or by calling {@link Ext.MessageBox#show} with progress: true. - * @param {Number} value Any number between 0 and 1 (e.g., .5, defaults to 0) - * @param {String} progressText The progress text to display inside the progress bar (defaults to '') - * @param {String} msg The message box's body text is replaced with the specified string (defaults to undefined - * so that any existing body text will not get overwritten by default unless a new value is passed in) - * @return {Ext.MessageBox} this - */ - updateProgress : function(value, progressText, msg){ - progressBar.updateProgress(value, progressText); - if(msg){ - this.updateText(msg); - } - return this; - }, - - /** - * Returns true if the message box is currently displayed - * @return {Boolean} True if the message box is visible, else false - */ - isVisible : function(){ - return dlg && dlg.isVisible(); - }, - - /** - * Hides the message box if it is displayed - * @return {Ext.MessageBox} this - */ - hide : function(){ - var proxy = dlg ? dlg.activeGhost : null; - if(this.isVisible() || proxy){ - dlg.hide(); - handleHide(); - if (proxy){ - // unghost is a private function, but i saw no better solution - // to fix the locking problem when dragging while it closes - dlg.unghost(false, false); - } - } - return this; - }, - - /** - * Displays a new message box, or reinitializes an existing message box, based on the config options - * passed in. All display functions (e.g. prompt, alert, etc.) on MessageBox call this function internally, - * although those calls are basic shortcuts and do not support all of the config options allowed here. - * @param {Object} config The following config options are supported: - * Example usage: - * 

-Ext.Msg.show({
-   title: 'Address',
-   msg: 'Please enter your address:',
-   width: 300,
-   buttons: Ext.MessageBox.OKCANCEL,
-   multiline: true,
-   fn: saveAddress,
-   animEl: 'addAddressBtn',
-   icon: Ext.MessageBox.INFO
-});
-
- * @return {Ext.MessageBox} this - */ - show : function(options){ - if(this.isVisible()){ - this.hide(); - } - opt = options; - var d = this.getDialog(opt.title || " "); - - d.setTitle(opt.title || " "); - var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true); - d.tools.close.setDisplayed(allowClose); - 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(); - } - activeTextEl.dom.value = opt.value || ""; - if(opt.prompt){ - d.focusEl = activeTextEl; - }else{ - var bs = opt.buttons; - var db = null; - if(bs && bs.ok){ - db = buttons["ok"]; - }else if(bs && bs.yes){ - db = buttons["yes"]; - } - if (db){ - d.focusEl = db; - } - } - if(opt.iconCls){ - d.setIconClass(opt.iconCls); - } - this.setIcon(opt.icon); - 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; - - d.on('show', function(){ - //workaround for window internally enabling keymap in afterShow - d.keyMap.setDisabled(allowClose !== true); - d.doLayout(); - this.setIcon(opt.icon); - bwidth = updateButtons(opt.buttons); - progressBar.setVisible(opt.progress === true || opt.wait === true); - this.updateProgress(0, opt.progressText); - this.updateText(opt.msg); - if(opt.wait === true){ - progressBar.wait(opt.waitConfig); - } - - }, this, {single:true}); - 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.setAnimateTarget(opt.animEl); - d.show(opt.animEl); - } - return this; - }, - - /** - * Adds the specified icon to the dialog. By default, the class 'ext-mb-icon' is applied for default - * styling, and the class passed in is expected to supply the background image url. Pass in empty string ('') - * to clear any existing icon. The following built-in icon classes are supported, but you can also pass - * in a custom class name: - * 
-Ext.MessageBox.INFO
-Ext.MessageBox.WARNING
-Ext.MessageBox.QUESTION
-Ext.MessageBox.ERROR
-         *
- * @param {String} icon A CSS classname specifying the icon's background image url, or empty string to clear the icon - * @return {Ext.MessageBox} this - */ - setIcon : function(icon){ - if(icon && icon != ''){ - iconEl.removeClass('x-hidden'); - iconEl.replaceClass(iconCls, icon); - bodyEl.addClass('x-dlg-icon'); - iconCls = icon; - }else{ - iconEl.replaceClass(iconCls, 'x-hidden'); - bodyEl.removeClass('x-dlg-icon'); - iconCls = ''; - } - 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 - * @param {String} progressText (optional) The text to display inside the progress bar (defaults to '') - * @return {Ext.MessageBox} this - */ - progress : function(title, msg, progressText){ - this.show({ - title : title, - msg : msg, - buttons: false, - progress:true, - closable:false, - minWidth: this.minProgressWidth, - progressText: progressText - }); - 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 - * @param {Object} config (optional) A {@link Ext.ProgressBar#waitConfig} object - * @return {Ext.MessageBox} this - */ - wait : function(msg, title, config){ - this.show({ - title : title, - msg : msg, - buttons: false, - closable:false, - wait:true, - modal:true, - minWidth: this.minProgressWidth, - waitConfig: config - }); - return this; - }, - - /** - * Displays a standard read-only message box with an OK button (comparable to the basic JavaScript alert prompt). - * 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} this - */ - alert : function(title, msg, fn, scope){ - this.show({ - title : title, - msg : msg, - buttons: this.OK, - fn: fn, - scope : scope - }); - return this; - }, - - /** - * Displays a confirmation message box with Yes and No buttons (comparable to JavaScript's confirm). - * 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} this - */ - confirm : function(title, msg, fn, scope){ - this.show({ - title : title, - msg : msg, - buttons: this.YESNO, - fn: fn, - scope : scope, - icon: this.QUESTION - }); - return this; - }, - - /** - * Displays a message box with OK and Cancel buttons prompting the user to enter some text (comparable to JavaScript's prompt). - * 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) - * @param {String} value (optional) Default value of the text input element (defaults to '') - * @return {Ext.MessageBox} this - */ - prompt : function(title, msg, fn, scope, multiline, value){ - this.show({ - title : title, - msg : msg, - buttons: this.OKCANCEL, - fn: fn, - minWidth:250, - scope : scope, - prompt:true, - multiline: multiline, - value: value - }); - return this; - }, - - /** - * Button config that displays a single OK button - * @type Object - */ - OK : {ok:true}, - /** - * Button config that displays a single Cancel button - * @type Object - */ - CANCEL : {cancel:true}, - /** - * Button config that displays OK and Cancel buttons - * @type Object - */ - OKCANCEL : {ok:true, cancel:true}, - /** - * Button config that displays Yes and No buttons - * @type Object - */ - YESNO : {yes:true, no:true}, - /** - * Button config that displays Yes, No and Cancel buttons - * @type Object - */ - YESNOCANCEL : {yes:true, no:true, cancel:true}, - /** - * The CSS class that provides the INFO icon image - * @type String - */ - INFO : 'ext-mb-info', - /** - * The CSS class that provides the WARNING icon image - * @type String - */ - WARNING : 'ext-mb-warning', - /** - * The CSS class that provides the QUESTION icon image - * @type String - */ - QUESTION : 'ext-mb-question', - /** - * The CSS class that provides the ERROR icon image - * @type String - */ - ERROR : 'ext-mb-error', - - /** - * 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 110) - * @type Number - */ - minWidth : 110, - /** - * The minimum width in pixels of the message box if it is a progress-style dialog. This is useful - * for setting a different minimum width than text-only dialogs may need (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. Generally you should include a locale-specific - * resource file for handling language support across the framework. - * Customize the default text like so: Ext.MessageBox.buttonText.yes = "oui"; //french - * @type Object - */ - buttonText : { - ok : "OK", - cancel : "Cancel", - yes : "Yes", - no : "No" - } - }; -}(); - -/** - * Shorthand for {@link Ext.MessageBox} - */ -Ext.Msg = Ext.MessageBox;/** - * @class Ext.dd.PanelProxy - * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally - * for the Panel's drag drop implementation, and should never need to be created directly. - * @constructor - * @param panel The {@link Ext.Panel} to proxy for - * @param config Configuration options - */ -Ext.dd.PanelProxy = function(panel, config){ - this.panel = panel; - this.id = this.panel.id +'-ddproxy'; - Ext.apply(this, config); -}; - -Ext.dd.PanelProxy.prototype = { - /** - * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel, - * false to drag with no proxy (defaults to true). - */ - insertProxy : true, - - // private overrides - setStatus : Ext.emptyFn, - reset : Ext.emptyFn, - update : Ext.emptyFn, - stop : Ext.emptyFn, - sync: Ext.emptyFn, - - /** - * Gets the proxy's element - * @return {Element} The proxy's element - */ - getEl : function(){ - return this.ghost; - }, - - /** - * Gets the proxy's ghost element - * @return {Element} The proxy's ghost element - */ - getGhost : function(){ - return this.ghost; - }, - - /** - * Gets the proxy's element - * @return {Element} The proxy's element - */ - getProxy : function(){ - return this.proxy; - }, - - /** - * Hides the proxy - */ - hide : function(){ - if(this.ghost){ - if(this.proxy){ - this.proxy.remove(); - delete this.proxy; - } - this.panel.el.dom.style.display = ''; - this.ghost.remove(); - delete this.ghost; - } - }, - - /** - * Shows the proxy - */ - show : function(){ - if(!this.ghost){ - this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody()); - this.ghost.setXY(this.panel.el.getXY()) - if(this.insertProxy){ - this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'}); - this.proxy.setSize(this.panel.getSize()); - } - this.panel.el.dom.style.display = 'none'; - } - }, - - // private - repair : function(xy, callback, scope){ - this.hide(); - if(typeof callback == "function"){ - callback.call(scope || this); - } - }, - - /** - * Moves the proxy to a different position in the DOM. This is typically called while dragging the Panel - * to keep the proxy sync'd to the Panel's location. - * @param {HTMLElement} parentNode The proxy's parent DOM node - * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults - * to the parent's last child if not specified) - */ - moveProxy : function(parentNode, before){ - if(this.proxy){ - parentNode.insertBefore(this.proxy.dom, before); - } - } -}; - -// private - DD implementation for Panels -Ext.Panel.DD = function(panel, cfg){ - this.panel = panel; - this.dragData = {panel: panel}; - this.proxy = new Ext.dd.PanelProxy(panel, cfg); - Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg); - var h = panel.header; - if(h){ - this.setHandleElId(h.id); - } - (h ? h : this.panel.body).setStyle('cursor', 'move'); - this.scroll = false; -}; - -Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, { - showFrame: Ext.emptyFn, - startDrag: Ext.emptyFn, - b4StartDrag: function(x, y) { - this.proxy.show(); - }, - b4MouseDown: function(e) { - var x = e.getPageX(); - var y = e.getPageY(); - this.autoOffset(x, y); - }, - onInitDrag : function(x, y){ - this.onStartDrag(x, y); - return true; - }, - createFrame : Ext.emptyFn, - getDragEl : function(e){ - return this.proxy.ghost.dom; - }, - endDrag : function(e){ - this.proxy.hide(); - this.panel.saveState(); - }, - - autoOffset : function(x, y) { - x -= this.startPageX; - y -= this.startPageY; - this.setDelta(x, y); - } -}); \ No newline at end of file