4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.BasicDialog
14 * @extends Roo.util.Observable
15 * @parent none builder
16 * Lightweight Dialog Class. The code below shows the creation of a typical dialog using existing HTML markup:
18 var dlg = new Roo.BasicDialog("my-dlg", {
27 dlg.addKeyListener(27, dlg.hide, dlg); // ESC can also close the dialog
28 dlg.addButton('OK', dlg.hide, dlg); // Could call a save function instead of hiding
29 dlg.addButton('Cancel', dlg.hide, dlg);
32 <b>A Dialog should always be a direct child of the body element.</b>
33 * @cfg {Boolean/DomHelper} autoCreate True to auto create from scratch, or using a DomHelper Object (defaults to false)
34 * @cfg {String} title Default text to display in the title bar (defaults to null)
35 * @cfg {Number} width Width of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
36 * @cfg {Number} height Height of the dialog in pixels (can also be set via CSS). Determined by browser if unspecified.
37 * @cfg {Number} x The default left page coordinate of the dialog (defaults to center screen)
38 * @cfg {Number} y The default top page coordinate of the dialog (defaults to center screen)
39 * @cfg {String/Element} animateTarget Id or element from which the dialog should animate while opening
40 * (defaults to null with no animation)
41 * @cfg {Boolean} resizable False to disable manual dialog resizing (defaults to true)
42 * @cfg {String} resizeHandles Which resize handles to display - see the {@link Roo.Resizable} handles config
43 * property for valid values (defaults to 'all')
44 * @cfg {Number} minHeight The minimum allowable height for a resizable dialog (defaults to 80)
45 * @cfg {Number} minWidth The minimum allowable width for a resizable dialog (defaults to 200)
46 * @cfg {Boolean} modal True to show the dialog modally, preventing user interaction with the rest of the page (defaults to false)
47 * @cfg {Boolean} autoScroll True to allow the dialog body contents to overflow and display scrollbars (defaults to false)
48 * @cfg {Boolean} closable False to remove the built-in top-right corner close button (defaults to true)
49 * @cfg {Boolean} collapsible False to remove the built-in top-right corner collapse button (defaults to true)
50 * @cfg {Boolean} constraintoviewport True to keep the dialog constrained within the visible viewport boundaries (defaults to true)
51 * @cfg {Boolean} syncHeightBeforeShow True to cause the dimensions to be recalculated before the dialog is shown (defaults to false)
52 * @cfg {Boolean} draggable False to disable dragging of the dialog within the viewport (defaults to true)
53 * @cfg {Boolean} autoTabs If true, all elements with class 'x-dlg-tab' will get automatically converted to tabs (defaults to false)
54 * @cfg {String} tabTag The tag name of tab elements, used when autoTabs = true (defaults to 'div')
55 * @cfg {Boolean} proxyDrag True to drag a lightweight proxy element rather than the dialog itself, used when
56 * draggable = true (defaults to false)
57 * @cfg {Boolean} fixedcenter True to ensure that anytime the dialog is shown or resized it gets centered (defaults to false)
58 * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
59 * shadow (defaults to false)
60 * @cfg {Number} shadowOffset The number of pixels to offset the shadow if displayed (defaults to 5)
61 * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "right")
62 * @cfg {Number} minButtonWidth Minimum width of all dialog buttons (defaults to 75)
63 * @cfg {Array} buttons Array of buttons
64 * @cfg {Boolean} shim True to create an iframe shim that prevents selects from showing through (defaults to false)
66 * Create a new BasicDialog.
67 * @param {String/HTMLElement/Roo.Element} el The container element or DOM node, or its id
68 * @param {Object} config Configuration options
70 Roo.BasicDialog = function(el, config){
71 this.el = Roo.get(el);
72 var dh = Roo.DomHelper;
73 if(!this.el && config && config.autoCreate){
74 if(typeof config.autoCreate == "object"){
75 if(!config.autoCreate.id){
76 config.autoCreate.id = el;
78 this.el = dh.append(document.body,
79 config.autoCreate, true);
81 this.el = dh.append(document.body,
82 {tag: "div", id: el, style:'visibility:hidden;'}, true);
86 el.setDisplayed(true);
87 el.hide = this.hideAction;
91 Roo.apply(this, config);
93 this.proxy = el.createProxy("x-dlg-proxy");
94 this.proxy.hide = this.hideAction;
95 this.proxy.setOpacity(.5);
99 el.setWidth(config.width);
102 el.setHeight(config.height);
104 this.size = el.getSize();
105 if(typeof config.x != "undefined" && typeof config.y != "undefined"){
106 this.xy = [config.x,config.y];
108 this.xy = el.getCenterXY(true);
110 /** The header element @type Roo.Element */
111 this.header = el.child("> .x-dlg-hd");
112 /** The body element @type Roo.Element */
113 this.body = el.child("> .x-dlg-bd");
114 /** The footer element @type Roo.Element */
115 this.footer = el.child("> .x-dlg-ft");
118 this.header = el.createChild({tag: "div", cls:"x-dlg-hd", html: " "}, this.body ? this.body.dom : null);
121 this.body = el.createChild({tag: "div", cls:"x-dlg-bd"});
124 this.header.unselectable();
126 this.header.update(this.title);
128 // this element allows the dialog to be focused for keyboard event
129 this.focusEl = el.createChild({tag: "a", href:"#", cls:"x-dlg-focus", tabIndex:"-1"});
130 this.focusEl.swallowEvent("click", true);
132 this.header.wrap({cls:"x-dlg-hd-right"}).wrap({cls:"x-dlg-hd-left"}, true);
134 // wrap the body and footer for special rendering
135 this.bwrap = this.body.wrap({tag: "div", cls:"x-dlg-dlg-body"});
137 this.bwrap.dom.appendChild(this.footer.dom);
140 this.bg = this.el.createChild({
141 tag: "div", cls:"x-dlg-bg",
142 html: '<div class="x-dlg-bg-left"><div class="x-dlg-bg-right"><div class="x-dlg-bg-center"> </div></div></div>'
144 this.centerBg = this.bg.child("div.x-dlg-bg-center");
147 if(this.autoScroll !== false && !this.autoTabs){
148 this.body.setStyle("overflow", "auto");
151 this.toolbox = this.el.createChild({cls: "x-dlg-toolbox"});
153 if(this.closable !== false){
154 this.el.addClass("x-dlg-closable");
155 this.close = this.toolbox.createChild({cls:"x-dlg-close"});
156 this.close.on("click", this.closeClick, this);
157 this.close.addClassOnOver("x-dlg-close-over");
159 if(this.collapsible !== false){
160 this.collapseBtn = this.toolbox.createChild({cls:"x-dlg-collapse"});
161 this.collapseBtn.on("click", this.collapseClick, this);
162 this.collapseBtn.addClassOnOver("x-dlg-collapse-over");
163 this.header.on("dblclick", this.collapseClick, this);
165 if(this.resizable !== false){
166 this.el.addClass("x-dlg-resizable");
167 this.resizer = new Roo.Resizable(el, {
168 minWidth: this.minWidth || 80,
169 minHeight:this.minHeight || 80,
170 handles: this.resizeHandles || "all",
173 this.resizer.on("beforeresize", this.beforeResize, this);
174 this.resizer.on("resize", this.onResize, this);
176 if(this.draggable !== false){
177 el.addClass("x-dlg-draggable");
178 if (!this.proxyDrag) {
179 var dd = new Roo.dd.DD(el.dom.id, "WindowDrag");
182 var dd = new Roo.dd.DDProxy(el.dom.id, "WindowDrag", {dragElId: this.proxy.id});
184 dd.setHandleElId(this.header.id);
185 dd.endDrag = this.endMove.createDelegate(this);
186 dd.startDrag = this.startMove.createDelegate(this);
187 dd.onDrag = this.onDrag.createDelegate(this);
192 this.mask = dh.append(document.body, {tag: "div", cls:"x-dlg-mask"}, true);
193 this.mask.enableDisplayMode("block");
195 this.el.addClass("x-dlg-modal");
198 this.shadow = new Roo.Shadow({
199 mode : typeof this.shadow == "string" ? this.shadow : "sides",
200 offset : this.shadowOffset
203 this.shadowOffset = 0;
205 if(Roo.useShims && this.shim !== false){
206 this.shim = this.el.createShim();
207 this.shim.hide = this.hideAction;
216 var bts= this.buttons;
218 Roo.each(bts, function(b) {
227 * Fires when a key is pressed
228 * @param {Roo.BasicDialog} this
229 * @param {Roo.EventObject} e
234 * Fires when this dialog is moved by the user.
235 * @param {Roo.BasicDialog} this
236 * @param {Number} x The new page X
237 * @param {Number} y The new page Y
242 * Fires when this dialog is resized by the user.
243 * @param {Roo.BasicDialog} this
244 * @param {Number} width The new width
245 * @param {Number} height The new height
250 * Fires before this dialog is hidden.
251 * @param {Roo.BasicDialog} this
256 * Fires when this dialog is hidden.
257 * @param {Roo.BasicDialog} this
262 * Fires before this dialog is shown.
263 * @param {Roo.BasicDialog} this
268 * Fires when this dialog is shown.
269 * @param {Roo.BasicDialog} this
273 el.on("keydown", this.onKeyDown, this);
274 el.on("mousedown", this.toFront, this);
275 Roo.EventManager.onWindowResize(this.adjustViewport, this, true);
277 Roo.DialogManager.register(this);
278 Roo.BasicDialog.superclass.constructor.call(this);
281 Roo.extend(Roo.BasicDialog, Roo.util.Observable, {
282 shadowOffset: Roo.isIE ? 6 : 5,
287 buttonAlign: "right",
292 * Sets the dialog title text
293 * @param {String} text The title text to display
294 * @return {Roo.BasicDialog} this
296 setTitle : function(text){
297 this.header.update(text);
302 closeClick : function(){
307 collapseClick : function(){
308 this[this.collapsed ? "expand" : "collapse"]();
312 * Collapses the dialog to its minimized state (only the title bar is visible).
313 * Equivalent to the user clicking the collapse dialog button.
315 collapse : function(){
317 this.collapsed = true;
318 this.el.addClass("x-dlg-collapsed");
319 this.restoreHeight = this.el.getHeight();
320 this.resizeTo(this.el.getWidth(), this.header.getHeight());
325 * Expands a collapsed dialog back to its normal state. Equivalent to the user
326 * clicking the expand dialog button.
330 this.collapsed = false;
331 this.el.removeClass("x-dlg-collapsed");
332 this.resizeTo(this.el.getWidth(), this.restoreHeight);
337 * Reinitializes the tabs component, clearing out old tabs and finding new ones.
338 * @return {Roo.TabPanel} The tabs component
340 initTabs : function(){
341 var tabs = this.getTabs();
342 while(tabs.getTab(0)){
345 this.el.select(this.tabTag+'.x-dlg-tab').each(function(el){
347 tabs.addTab(Roo.id(dom), dom.title);
355 beforeResize : function(){
356 this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
360 onResize : function(){
362 this.syncBodyHeight();
365 this.fireEvent("resize", this, this.size.width, this.size.height);
369 onKeyDown : function(e){
370 if(this.isVisible()){
371 this.fireEvent("keydown", this, e);
376 * Resizes the dialog.
377 * @param {Number} width
378 * @param {Number} height
379 * @return {Roo.BasicDialog} this
381 resizeTo : function(width, height){
382 this.el.setSize(width, height);
383 this.size = {width: width, height: height};
384 this.syncBodyHeight();
385 if(this.fixedcenter){
388 if(this.isVisible()){
392 this.fireEvent("resize", this, width, height);
398 * Resizes the dialog to fit the specified content size.
399 * @param {Number} width
400 * @param {Number} height
401 * @return {Roo.BasicDialog} this
403 setContentSize : function(w, h){
404 h += this.getHeaderFooterHeight() + this.body.getMargins("tb");
405 w += this.body.getMargins("lr") + this.bwrap.getMargins("lr") + this.centerBg.getPadding("lr");
406 //if(!this.el.isBorderBox()){
407 h += this.body.getPadding("tb") + this.bwrap.getBorderWidth("tb") + this.body.getBorderWidth("tb") + this.el.getBorderWidth("tb");
408 w += this.body.getPadding("lr") + this.bwrap.getBorderWidth("lr") + this.body.getBorderWidth("lr") + this.bwrap.getPadding("lr") + this.el.getBorderWidth("lr");
411 h += this.tabs.stripWrap.getHeight() + this.tabs.bodyEl.getMargins("tb") + this.tabs.bodyEl.getPadding("tb");
412 w += this.tabs.bodyEl.getMargins("lr") + this.tabs.bodyEl.getPadding("lr");
419 * Adds a key listener for when this dialog is displayed. This allows you to hook in a function that will be
420 * executed in response to a particular key being pressed while the dialog is active.
421 * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the following options:
422 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
423 * @param {Function} fn The function to call
424 * @param {Object} scope (optional) The scope of the function
425 * @return {Roo.BasicDialog} this
427 addKeyListener : function(key, fn, scope){
428 var keyCode, shift, ctrl, alt;
429 if(typeof key == "object" && !(key instanceof Array)){
430 keyCode = key["key"];
431 shift = key["shift"];
437 var handler = function(dlg, e){
438 if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
440 if(keyCode instanceof Array){
441 for(var i = 0, len = keyCode.length; i < len; i++){
443 fn.call(scope || window, dlg, k, e);
449 fn.call(scope || window, dlg, k, e);
454 this.on("keydown", handler);
459 * Returns the TabPanel component (creates it if it doesn't exist).
460 * Note: If you wish to simply check for the existence of tabs without creating them,
461 * check for a null 'tabs' property.
462 * @return {Roo.TabPanel} The tabs component
464 getTabs : function(){
466 this.el.addClass("x-dlg-auto-tabs");
467 this.body.addClass(this.tabPosition == "bottom" ? "x-tabs-bottom" : "x-tabs-top");
468 this.tabs = new Roo.TabPanel(this.body.dom, this.tabPosition == "bottom");
474 * Adds a button to the footer section of the dialog.
475 * @param {String/Object} config A string becomes the button text, an object can either be a Button config
476 * object or a valid Roo.DomHelper element config
477 * @param {Function} handler The function called when the button is clicked
478 * @param {Object} scope (optional) The scope of the handler function (accepts position as a property)
479 * @return {Roo.Button} The new button
481 addButton : function(config, handler, scope){
482 var dh = Roo.DomHelper;
484 this.footer = dh.append(this.bwrap, {tag: "div", cls:"x-dlg-ft"}, true);
486 if(!this.btnContainer){
487 var tb = this.footer.createChild({
489 cls:"x-dlg-btns x-dlg-btns-"+this.buttonAlign,
490 html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
492 this.btnContainer = tb.firstChild.firstChild.firstChild;
497 minWidth: this.minButtonWidth,
500 if(typeof config == "string"){
501 bconfig.text = config;
504 bconfig.dhconfig = config;
506 Roo.apply(bconfig, config);
510 if ((typeof(bconfig.position) != 'undefined') && bconfig.position < this.btnContainer.childNodes.length-1) {
511 bconfig.position = Math.max(0, bconfig.position);
512 fc = this.btnContainer.childNodes[bconfig.position];
515 var btn = new Roo.Button(
517 this.btnContainer.insertBefore(document.createElement("td"),fc)
518 : this.btnContainer.appendChild(document.createElement("td")),
519 //Roo.get(this.btnContainer).createChild( { tag: 'td'}, fc ),
522 this.syncBodyHeight();
525 * Array of all the buttons that have been added to this dialog via addButton
530 this.buttons.push(btn);
535 * Sets the default button to be focused when the dialog is displayed.
536 * @param {Roo.BasicDialog.Button} btn The button object returned by {@link #addButton}
537 * @return {Roo.BasicDialog} this
539 setDefaultButton : function(btn){
540 this.defaultButton = btn;
545 getHeaderFooterHeight : function(safe){
548 height += this.header.getHeight();
551 var fm = this.footer.getMargins();
552 height += (this.footer.getHeight()+fm.top+fm.bottom);
554 height += this.bwrap.getPadding("tb")+this.bwrap.getBorderWidth("tb");
555 height += this.centerBg.getPadding("tb");
560 syncBodyHeight : function()
562 var bd = this.body, // the text
563 cb = this.centerBg, // wrapper around bottom.. but does not seem to be used..
565 var height = this.size.height - this.getHeaderFooterHeight(false);
566 bd.setHeight(height-bd.getMargins("tb"));
567 var hh = this.header.getHeight();
568 var h = this.size.height-hh;
571 bw.setLeftTop(cb.getPadding("l"), hh+cb.getPadding("t"));
572 bw.setHeight(h-cb.getPadding("tb"));
574 bw.setWidth(this.el.getWidth(true)-cb.getPadding("lr"));
575 bd.setWidth(bw.getWidth(true));
577 this.tabs.syncHeight();
579 this.tabs.el.repaint();
585 * Restores the previous state of the dialog if Roo.state is configured.
586 * @return {Roo.BasicDialog} this
588 restoreState : function(){
589 var box = Roo.state.Manager.get(this.stateId || (this.el.id + "-state"));
590 if(box && box.width){
591 this.xy = [box.x, box.y];
592 this.resizeTo(box.width, box.height);
598 beforeShow : function(){
600 if(this.fixedcenter){
601 this.xy = this.el.getCenterXY(true);
604 Roo.get(document.body).addClass("x-body-masked");
605 this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
612 animShow : function(){
613 var b = Roo.get(this.animateTarget).getBox();
614 this.proxy.setSize(b.width, b.height);
615 this.proxy.setLocation(b.x, b.y);
617 this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height,
618 true, .35, this.showEl.createDelegate(this));
623 * @param {String/HTMLElement/Roo.Element} animateTarget (optional) Reset the animation target
624 * @return {Roo.BasicDialog} this
626 show : function(animateTarget){
627 if (this.fireEvent("beforeshow", this) === false){
630 if(this.syncHeightBeforeShow){
631 this.syncBodyHeight();
632 }else if(this.firstShow){
633 this.firstShow = false;
634 this.syncBodyHeight(); // sync the height on the first show instead of in the constructor
636 this.animateTarget = animateTarget || this.animateTarget;
637 if(!this.el.isVisible()){
639 if(this.animateTarget && Roo.get(this.animateTarget)){
651 this.el.setXY(this.xy);
653 this.adjustAssets(true);
656 // IE peekaboo bug - fix found by Dave Fenwick
660 this.fireEvent("show", this);
664 * Focuses the dialog. If a defaultButton is set, it will receive focus, otherwise the
665 * dialog itself will receive focus.
668 if(this.defaultButton){
669 this.defaultButton.focus();
671 this.focusEl.focus();
676 constrainXY : function(){
677 if(this.constraintoviewport !== false){
680 var s = this.container.getSize();
681 this.viewSize = [s.width, s.height];
683 this.viewSize = [Roo.lib.Dom.getViewWidth(),Roo.lib.Dom.getViewHeight()];
686 var s = Roo.get(this.container||document).getScroll();
688 var x = this.xy[0], y = this.xy[1];
689 var w = this.size.width, h = this.size.height;
690 var vw = this.viewSize[0], vh = this.viewSize[1];
691 // only move it if it needs it
693 // first validate right/bottom
694 if(x + w > vw+s.left){
698 if(y + h > vh+s.top){
702 // then make sure top/left isn't negative
714 if(this.isVisible()){
715 this.el.setLocation(x, y);
725 this.xy = this.el.getXY();
731 adjustAssets : function(doShow){
732 var x = this.xy[0], y = this.xy[1];
733 var w = this.size.width, h = this.size.height;
736 this.shadow.show(this.el);
742 if(this.shadow && this.shadow.isVisible()){
743 this.shadow.show(this.el);
745 if(this.shim && this.shim.isVisible()){
746 this.shim.setBounds(x, y, w, h);
751 adjustViewport : function(w, h){
753 w = Roo.lib.Dom.getViewWidth();
754 h = Roo.lib.Dom.getViewHeight();
757 this.viewSize = [w, h];
758 if(this.modal && this.mask.isVisible()){
759 this.mask.setSize(w, h); // first make sure the mask isn't causing overflow
760 this.mask.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
762 if(this.isVisible()){
768 * Destroys this dialog and all its supporting elements (including any tabs, shim,
769 * shadow, proxy, mask, etc.) Also removes all event listeners.
770 * @param {Boolean} removeEl (optional) true to remove the element from the DOM
772 destroy : function(removeEl){
773 if(this.isVisible()){
774 this.animateTarget = null;
777 Roo.EventManager.removeResizeListener(this.adjustViewport, this);
779 this.tabs.destroy(removeEl);
792 for(var i = 0, len = this.buttons.length; i < len; i++){
793 this.buttons[i].destroy();
796 this.el.removeAllListeners();
797 if(removeEl === true){
801 Roo.DialogManager.unregister(this);
805 startMove : function(){
809 if(this.constraintoviewport !== false){
810 this.dd.constrainTo(document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
815 endMove : function(){
817 Roo.dd.DD.prototype.endDrag.apply(this.dd, arguments);
819 Roo.dd.DDProxy.prototype.endDrag.apply(this.dd, arguments);
825 this.fireEvent("move", this, this.xy[0], this.xy[1]);
829 * Brings this dialog to the front of any other visible dialogs
830 * @return {Roo.BasicDialog} this
832 toFront : function(){
833 Roo.DialogManager.bringToFront(this);
838 * Sends this dialog to the back (under) of any other visible dialogs
839 * @return {Roo.BasicDialog} this
842 Roo.DialogManager.sendToBack(this);
847 * Centers this dialog in the viewport
848 * @return {Roo.BasicDialog} this
851 var xy = this.el.getCenterXY(true);
852 this.moveTo(xy[0], xy[1]);
857 * Moves the dialog's top-left corner to the specified point
860 * @return {Roo.BasicDialog} this
862 moveTo : function(x, y){
864 if(this.isVisible()){
865 this.el.setXY(this.xy);
872 * Aligns the dialog to the specified element
873 * @param {String/HTMLElement/Roo.Element} element The element to align to.
874 * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details).
875 * @param {Array} offsets (optional) Offset the positioning by [x, y]
876 * @return {Roo.BasicDialog} this
878 alignTo : function(element, position, offsets){
879 this.xy = this.el.getAlignToXY(element, position, offsets);
880 if(this.isVisible()){
881 this.el.setXY(this.xy);
888 * Anchors an element to another element and realigns it when the window is resized.
889 * @param {String/HTMLElement/Roo.Element} element The element to align to.
890 * @param {String} position The position to align to (see {@link Roo.Element#alignTo} for more details)
891 * @param {Array} offsets (optional) Offset the positioning by [x, y]
892 * @param {Boolean/Number} monitorScroll (optional) true to monitor body scroll and reposition. If this parameter
893 * is a number, it is used as the buffer delay (defaults to 50ms).
894 * @return {Roo.BasicDialog} this
896 anchorTo : function(el, alignment, offsets, monitorScroll){
897 var action = function(){
898 this.alignTo(el, alignment, offsets);
900 Roo.EventManager.onWindowResize(action, this);
901 var tm = typeof monitorScroll;
902 if(tm != 'undefined'){
903 Roo.EventManager.on(window, 'scroll', action, this,
904 {buffer: tm == 'number' ? monitorScroll : 50});
911 * Returns true if the dialog is visible
914 isVisible : function(){
915 return this.el.isVisible();
919 animHide : function(callback){
920 var b = Roo.get(this.animateTarget).getBox();
922 this.proxy.setBounds(this.xy[0], this.xy[1], this.size.width, this.size.height);
924 this.proxy.setBounds(b.x, b.y, b.width, b.height, true, .35,
925 this.hideEl.createDelegate(this, [callback]));
930 * @param {Function} callback (optional) Function to call when the dialog is hidden
931 * @return {Roo.BasicDialog} this
933 hide : function(callback){
934 if (this.fireEvent("beforehide", this) === false){
943 // sometimes animateTarget seems to get set.. causing problems...
944 // this just double checks..
945 if(this.animateTarget && Roo.get(this.animateTarget)) {
946 this.animHide(callback);
949 this.hideEl(callback);
955 hideEl : function(callback){
959 Roo.get(document.body).removeClass("x-body-masked");
961 this.fireEvent("hide", this);
962 if(typeof callback == "function"){
968 hideAction : function(){
969 this.setLeft("-10000px");
970 this.setTop("-10000px");
971 this.setStyle("visibility", "hidden");
975 refreshSize : function(){
976 this.size = this.el.getSize();
977 this.xy = this.el.getXY();
978 Roo.state.Manager.set(this.stateId || this.el.id + "-state", this.el.getBox());
982 // z-index is managed by the DialogManager and may be overwritten at any time
983 setZIndex : function(index){
985 this.mask.setStyle("z-index", index);
988 this.shim.setStyle("z-index", ++index);
991 this.shadow.setZIndex(++index);
993 this.el.setStyle("z-index", ++index);
995 this.proxy.setStyle("z-index", ++index);
998 this.resizer.proxy.setStyle("z-index", ++index);
1001 this.lastZIndex = index;
1005 * Returns the element for this dialog
1006 * @return {Roo.Element} The underlying dialog Element
1014 * @class Roo.DialogManager
1015 * Provides global access to BasicDialogs that have been created and
1016 * support for z-indexing (layering) multiple open dialogs.
1018 Roo.DialogManager = function(){
1020 var accessList = [];
1024 var sortDialogs = function(d1, d2){
1025 return (!d1._lastAccess || d1._lastAccess < d2._lastAccess) ? -1 : 1;
1029 var orderDialogs = function(){
1030 accessList.sort(sortDialogs);
1031 var seed = Roo.DialogManager.zseed;
1032 for(var i = 0, len = accessList.length; i < len; i++){
1033 var dlg = accessList[i];
1035 dlg.setZIndex(seed + (i*10));
1042 * The starting z-index for BasicDialogs (defaults to 9000)
1043 * @type Number The z-index value
1048 register : function(dlg){
1050 accessList.push(dlg);
1054 unregister : function(dlg){
1055 delete list[dlg.id];
1058 if(!accessList.indexOf){
1059 for( i = 0, len = accessList.length; i < len; i++){
1060 if(accessList[i] == dlg){
1061 accessList.splice(i, 1);
1066 i = accessList.indexOf(dlg);
1068 accessList.splice(i, 1);
1074 * Gets a registered dialog by id
1075 * @param {String/Object} id The id of the dialog or a dialog
1076 * @return {Roo.BasicDialog} this
1079 return typeof id == "object" ? id : list[id];
1083 * Brings the specified dialog to the front
1084 * @param {String/Object} dlg The id of the dialog or a dialog
1085 * @return {Roo.BasicDialog} this
1087 bringToFront : function(dlg){
1088 dlg = this.get(dlg);
1091 dlg._lastAccess = new Date().getTime();
1098 * Sends the specified dialog to the back
1099 * @param {String/Object} dlg The id of the dialog or a dialog
1100 * @return {Roo.BasicDialog} this
1102 sendToBack : function(dlg){
1103 dlg = this.get(dlg);
1104 dlg._lastAccess = -(new Date().getTime());
1112 hideAll : function(){
1113 for(var id in list){
1114 if(list[id] && typeof list[id] != "function" && list[id].isVisible()){