git.roojs.org Git - roojs1/blob - Roo/bootstrap/layout/Region.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.bootstrap.layout.Region
  14  * @extends Roo.bootstrap.layout.Basic
  15  * This class represents a region in a layout manager.
  16
  17  * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
  18  * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
  19  * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
  20  * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
  21  * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
  22  * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
  23  * @cfg {String}    title           The title for the region (overrides panel titles)
  24  * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
  25  * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
  26  * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
  27  * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
  28  * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
  29  * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
  30  *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
  31  * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
  32  * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
  33  * @cfg {String}    overflow       (hidden|visible) if you have menus in the region, then you need to set this to visible.
  34
  35  * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
  36  * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
  37  * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
  38  * @cfg {Number}    width           For East/West panels
  39  * @cfg {Number}    height          For North/South panels
  40  * @cfg {Boolean}   split           To show the splitter
  41  * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
  42  *
  43  * @cfg {string}   cls             Extra CSS classes to add to region
  44  *
  45  * @cfg {Roo.bootstrap.layout.Manager}   mgr The manager
  46  * @cfg {string}   region  the region that it inhabits..
  47  *
  48
  49  * @xxxcfg {Boolean}   collapsible     DISABLED False to disable collapsing (defaults to true)
  50  * @xxxcfg {Boolean}   collapsed       DISABLED True to set the initial display to collapsed (defaults to false)
  51
  52  * @xxxcfg {String}    collapsedTitle  DISABLED Optional string message to display in the collapsed block of a north or south region
  53  * @xxxxcfg {Boolean}   floatable       DISABLED False to disable floating (defaults to true)
  54  * @xxxxcfg {Boolean}   showPin         True to show a pin button NOT SUPPORTED YET
  55  */
  56 Roo.bootstrap.layout.Region = function(config)
  57 {
  58     this.applyConfig(config);
  59
  60     var mgr = config.mgr;
  61     var pos = config.region;
  62     config.skipConfig = true;
  63     Roo.bootstrap.layout.Region.superclass.constructor.call(this, config);
  64
  65     if (mgr.el) {
  66         this.onRender(mgr.el);
  67     }
  68
  69     this.visible = true;
  70     this.collapsed = false;
  71     this.unrendered_panels = [];
  72 };
  73
  74 Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, {
  75
  76     position: '', // set by wrapper (eg. north/south etc..)
  77     unrendered_panels : null,  // unrendered panels.
  78
  79     tabPosition : false,
  80
  81     mgr: false, // points to 'Border'
  82
  83
  84     createBody : function(){
  85         /** This region's body element
  86         * @type Roo.Element */
  87         this.bodyEl = this.el.createChild({
  88                 tag: "div",
  89                 cls: "roo-layout-panel-body tab-content" // bootstrap added...
  90         });
  91     },
  92
  93     onRender: function(ctr, pos)
  94     {
  95         var dh = Roo.DomHelper;
  96         /** This region's container element
  97         * @type Roo.Element */
  98         this.el = dh.append(ctr.dom, {
  99                 tag: "div",
 100                 cls: (this.config.cls || '') + " roo-layout-region roo-layout-panel roo-layout-panel-" + this.position
 101             }, true);
 102         /** This region's title element
 103         * @type Roo.Element */
 104
 105         this.titleEl = dh.append(this.el.dom,  {
 106                 tag: "div",
 107                 unselectable: "on",
 108                 cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
 109                 children:[
 110                     {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
 111                     {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
 112                 ]
 113             }, true);
 114
 115         this.titleEl.enableDisplayMode();
 116         /** This region's title text element
 117         * @type HTMLElement */
 118         this.titleTextEl = this.titleEl.dom.firstChild;
 119         this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
 120         /*
 121         this.closeBtn = this.createTool(this.tools.dom, "roo-layout-close");
 122         this.closeBtn.enableDisplayMode();
 123         this.closeBtn.on("click", this.closeClicked, this);
 124         this.closeBtn.hide();
 125     */
 126         this.createBody(this.config);
 127         if(this.config.hideWhenEmpty){
 128             this.hide();
 129             this.on("paneladded", this.validateVisibility, this);
 130             this.on("panelremoved", this.validateVisibility, this);
 131         }
 132         if(this.autoScroll){
 133             this.bodyEl.setStyle("overflow", "auto");
 134         }else{
 135             this.bodyEl.setStyle("overflow", this.config.overflow || 'hidden');
 136         }
 137         //if(c.titlebar !== false){
 138             if((!this.config.titlebar && !this.config.title) || this.config.titlebar === false){
 139                 this.titleEl.hide();
 140             }else{
 141                 this.titleEl.show();
 142                 if(this.config.title){
 143                     this.titleTextEl.innerHTML = this.config.title;
 144                 }
 145             }
 146         //}
 147         if(this.config.collapsed){
 148             this.collapse(true);
 149         }
 150         if(this.config.hidden){
 151             this.hide();
 152         }
 153
 154         if (this.unrendered_panels && this.unrendered_panels.length) {
 155             for (var i =0;i< this.unrendered_panels.length; i++) {
 156                 this.add(this.unrendered_panels[i]);
 157             }
 158             this.unrendered_panels = null;
 159
 160         }
 161
 162     },
 163
 164     applyConfig : function(c)
 165     {
 166         /*
 167          *if(c.collapsible && this.position != "center" && !this.collapsedEl){
 168             var dh = Roo.DomHelper;
 169             if(c.titlebar !== false){
 170                 this.collapseBtn = this.createTool(this.tools.dom, "roo-layout-collapse-"+this.position);
 171                 this.collapseBtn.on("click", this.collapse, this);
 172                 this.collapseBtn.enableDisplayMode();
 173                 /*
 174                 if(c.showPin === true || this.showPin){
 175                     this.stickBtn = this.createTool(this.tools.dom, "roo-layout-stick");
 176                     this.stickBtn.enableDisplayMode();
 177                     this.stickBtn.on("click", this.expand, this);
 178                     this.stickBtn.hide();
 179                 }
 180
 181             }
 182             */
 183             /** This region's collapsed element
 184             * @type Roo.Element */
 185             /*
 186              *
 187             this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
 188                 {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
 189             ]}, true);
 190
 191             if(c.floatable !== false){
 192                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
 193                this.collapsedEl.on("click", this.collapseClick, this);
 194             }
 195
 196             if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
 197                 this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
 198                    id: "message", unselectable: "on", style:{"float":"left"}});
 199                this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
 200              }
 201             this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
 202             this.expandBtn.on("click", this.expand, this);
 203
 204         }
 205
 206         if(this.collapseBtn){
 207             this.collapseBtn.setVisible(c.collapsible == true);
 208         }
 209
 210         this.cmargins = c.cmargins || this.cmargins ||
 211                          (this.position == "west" || this.position == "east" ?
 212                              {top: 0, left: 2, right:2, bottom: 0} :
 213                              {top: 2, left: 0, right:0, bottom: 2});
 214         */
 215         this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
 216
 217
 218         this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
 219
 220         this.autoScroll = c.autoScroll || false;
 221
 222
 223
 224
 225         this.duration = c.duration || .30;
 226         this.slideDuration = c.slideDuration || .45;
 227         this.config = c;
 228
 229     },
 230     /**
 231      * Returns true if this region is currently visible.
 232      * @return {Boolean}
 233      */
 234     isVisible : function(){
 235         return this.visible;
 236     },
 237
 238     /**
 239      * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
 240      * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
 241      */
 242     //setCollapsedTitle : function(title){
 243     //    title = title || "&#160;";
 244      //   if(this.collapsedTitleTextEl){
 245       //      this.collapsedTitleTextEl.innerHTML = title;
 246        // }
 247     //},
 248
 249     getBox : function(){
 250         var b;
 251       //  if(!this.collapsed){
 252             b = this.el.getBox(false, true);
 253        // }else{
 254           //  b = this.collapsedEl.getBox(false, true);
 255         //}
 256         return b;
 257     },
 258
 259     getMargins : function(){
 260         return this.margins;
 261         //return this.collapsed ? this.cmargins : this.margins;
 262     },
 263 /*
 264     highlight : function(){
 265         this.el.addClass("x-layout-panel-dragover");
 266     },
 267
 268     unhighlight : function(){
 269         this.el.removeClass("x-layout-panel-dragover");
 270     },
 271 */
 272     updateBox : function(box)
 273     {
 274         if (!this.bodyEl) {
 275             return; // not rendered yet..
 276         }
 277
 278         this.box = box;
 279         if(!this.collapsed){
 280             this.el.dom.style.left = box.x + "px";
 281             this.el.dom.style.top = box.y + "px";
 282             this.updateBody(box.width, box.height);
 283         }else{
 284             this.collapsedEl.dom.style.left = box.x + "px";
 285             this.collapsedEl.dom.style.top = box.y + "px";
 286             this.collapsedEl.setSize(box.width, box.height);
 287         }
 288         if(this.tabs){
 289             this.tabs.autoSizeTabs();
 290         }
 291     },
 292
 293     updateBody : function(w, h)
 294     {
 295         if(w !== null){
 296             this.el.setWidth(w);
 297             w -= this.el.getBorderWidth("rl");
 298             if(this.config.adjustments){
 299                 w += this.config.adjustments[0];
 300             }
 301         }
 302         if(h !== null && h > 0){
 303             this.el.setHeight(h);
 304             h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
 305             h -= this.el.getBorderWidth("tb");
 306             if(this.config.adjustments){
 307                 h += this.config.adjustments[1];
 308             }
 309             this.bodyEl.setHeight(h);
 310             if(this.tabs){
 311                 h = this.tabs.syncHeight(h);
 312             }
 313         }
 314         if(this.panelSize){
 315             w = w !== null ? w : this.panelSize.width;
 316             h = h !== null ? h : this.panelSize.height;
 317         }
 318         if(this.activePanel){
 319             var el = this.activePanel.getEl();
 320             w = w !== null ? w : el.getWidth();
 321             h = h !== null ? h : el.getHeight();
 322             this.panelSize = {width: w, height: h};
 323             this.activePanel.setSize(w, h);
 324         }
 325         if(Roo.isIE && this.tabs){
 326             this.tabs.el.repaint();
 327         }
 328     },
 329
 330     /**
 331      * Returns the container element for this region.
 332      * @return {Roo.Element}
 333      */
 334     getEl : function(){
 335         return this.el;
 336     },
 337
 338     /**
 339      * Hides this region.
 340      */
 341     hide : function(){
 342         //if(!this.collapsed){
 343             this.el.dom.style.left = "-2000px";
 344             this.el.hide();
 345         //}else{
 346          //   this.collapsedEl.dom.style.left = "-2000px";
 347          //   this.collapsedEl.hide();
 348        // }
 349         this.visible = false;
 350         this.fireEvent("visibilitychange", this, false);
 351     },
 352
 353     /**
 354      * Shows this region if it was previously hidden.
 355      */
 356     show : function(){
 357         //if(!this.collapsed){
 358             this.el.show();
 359         //}else{
 360         //    this.collapsedEl.show();
 361        // }
 362         this.visible = true;
 363         this.fireEvent("visibilitychange", this, true);
 364     },
 365 /*
 366     closeClicked : function(){
 367         if(this.activePanel){
 368             this.remove(this.activePanel);
 369         }
 370     },
 371
 372     collapseClick : function(e){
 373         if(this.isSlid){
 374            e.stopPropagation();
 375            this.slideIn();
 376         }else{
 377            e.stopPropagation();
 378            this.slideOut();
 379         }
 380     },
 381 */
 382     /**
 383      * Collapses this region.
 384      * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
 385      */
 386     /*
 387     collapse : function(skipAnim, skipCheck = false){
 388         if(this.collapsed) {
 389             return;
 390         }
 391
 392         if(skipCheck || this.fireEvent("beforecollapse", this) != false){
 393
 394             this.collapsed = true;
 395             if(this.split){
 396                 this.split.el.hide();
 397             }
 398             if(this.config.animate && skipAnim !== true){
 399                 this.fireEvent("invalidated", this);
 400                 this.animateCollapse();
 401             }else{
 402                 this.el.setLocation(-20000,-20000);
 403                 this.el.hide();
 404                 this.collapsedEl.show();
 405                 this.fireEvent("collapsed", this);
 406                 this.fireEvent("invalidated", this);
 407             }
 408         }
 409
 410     },
 411 */
 412     animateCollapse : function(){
 413         // overridden
 414     },
 415
 416     /**
 417      * Expands this region if it was previously collapsed.
 418      * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
 419      * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
 420      */
 421     /*
 422     expand : function(e, skipAnim){
 423         if(e) {
 424             e.stopPropagation();
 425         }
 426         if(!this.collapsed || this.el.hasActiveFx()) {
 427             return;
 428         }
 429         if(this.isSlid){
 430             this.afterSlideIn();
 431             skipAnim = true;
 432         }
 433         this.collapsed = false;
 434         if(this.config.animate && skipAnim !== true){
 435             this.animateExpand();
 436         }else{
 437             this.el.show();
 438             if(this.split){
 439                 this.split.el.show();
 440             }
 441             this.collapsedEl.setLocation(-2000,-2000);
 442             this.collapsedEl.hide();
 443             this.fireEvent("invalidated", this);
 444             this.fireEvent("expanded", this);
 445         }
 446     },
 447 */
 448     animateExpand : function(){
 449         // overridden
 450     },
 451
 452     initTabs : function()
 453     {
 454         //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
 455
 456         var ts = new Roo.bootstrap.panel.Tabs({
 457             el: this.bodyEl.dom,
 458             region : this,
 459             tabPosition: this.tabPosition ? this.tabPosition  : 'top',
 460             disableTooltips: this.config.disableTabTips,
 461             toolbar : this.config.toolbar
 462         });
 463
 464         if(this.config.hideTabs){
 465             ts.stripWrap.setDisplayed(false);
 466         }
 467         this.tabs = ts;
 468         ts.resizeTabs = this.config.resizeTabs === true;
 469         ts.minTabWidth = this.config.minTabWidth || 40;
 470         ts.maxTabWidth = this.config.maxTabWidth || 250;
 471         ts.preferredTabWidth = this.config.preferredTabWidth || 150;
 472         ts.monitorResize = false;
 473         //ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden"); // this is set in render?
 474         ts.bodyEl.addClass('roo-layout-tabs-body');
 475         this.panels.each(this.initPanelAsTab, this);
 476     },
 477
 478     initPanelAsTab : function(panel){
 479         var ti = this.tabs.addTab(
 480             panel.getEl().id,
 481             panel.getTitle(),
 482             null,
 483             this.config.closeOnTab && panel.isClosable(),
 484             panel.tpl
 485         );
 486         if(panel.tabTip !== undefined){
 487             ti.setTooltip(panel.tabTip);
 488         }
 489         ti.on("activate", function(){
 490               this.setActivePanel(panel);
 491         }, this);
 492
 493         if(this.config.closeOnTab){
 494             ti.on("beforeclose", function(t, e){
 495                 e.cancel = true;
 496                 this.remove(panel);
 497             }, this);
 498         }
 499
 500         panel.tabItem = ti;
 501
 502         return ti;
 503     },
 504
 505     updatePanelTitle : function(panel, title)
 506     {
 507         if(this.activePanel == panel){
 508             this.updateTitle(title);
 509         }
 510         if(this.tabs){
 511             var ti = this.tabs.getTab(panel.getEl().id);
 512             ti.setText(title);
 513             if(panel.tabTip !== undefined){
 514                 ti.setTooltip(panel.tabTip);
 515             }
 516         }
 517     },
 518
 519     updateTitle : function(title){
 520         if(this.titleTextEl && !this.config.title){
 521             this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
 522         }
 523     },
 524
 525     setActivePanel : function(panel)
 526     {
 527         panel = this.getPanel(panel);
 528         if(this.activePanel && this.activePanel != panel){
 529             if(this.activePanel.setActiveState(false) === false){
 530                 return;
 531             }
 532         }
 533         this.activePanel = panel;
 534         panel.setActiveState(true);
 535         if(this.panelSize){
 536             panel.setSize(this.panelSize.width, this.panelSize.height);
 537         }
 538         if(this.closeBtn){
 539             this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
 540         }
 541         this.updateTitle(panel.getTitle());
 542         if(this.tabs){
 543             this.fireEvent("invalidated", this);
 544         }
 545         this.fireEvent("panelactivated", this, panel);
 546     },
 547
 548     /**
 549      * Shows the specified panel.
 550      * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
 551      * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
 552      */
 553     showPanel : function(panel)
 554     {
 555         panel = this.getPanel(panel);
 556         if(panel){
 557             if(this.tabs){
 558                 var tab = this.tabs.getTab(panel.getEl().id);
 559                 if(tab.isHidden()){
 560                     this.tabs.unhideTab(tab.id);
 561                 }
 562                 tab.activate();
 563             }else{
 564                 this.setActivePanel(panel);
 565             }
 566         }
 567         return panel;
 568     },
 569
 570     /**
 571      * Get the active panel for this region.
 572      * @return {Roo.ContentPanel} The active panel or null
 573      */
 574     getActivePanel : function(){
 575         return this.activePanel;
 576     },
 577
 578     validateVisibility : function(){
 579         if(this.panels.getCount() < 1){
 580             this.updateTitle("&#160;");
 581             this.closeBtn.hide();
 582             this.hide();
 583         }else{
 584             if(!this.isVisible()){
 585                 this.show();
 586             }
 587         }
 588     },
 589
 590     /**
 591      * Adds the passed ContentPanel(s) to this region.
 592      * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
 593      * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
 594      */
 595     add : function(panel)
 596     {
 597         if(arguments.length > 1){
 598             for(var i = 0, len = arguments.length; i < len; i++) {
 599                 this.add(arguments[i]);
 600             }
 601             return null;
 602         }
 603
 604         // if we have not been rendered yet, then we can not really do much of this..
 605         if (!this.bodyEl) {
 606             this.unrendered_panels.push(panel);
 607             return panel;
 608         }
 609
 610
 611
 612
 613         if(this.hasPanel(panel)){
 614             this.showPanel(panel);
 615             return panel;
 616         }
 617         panel.setRegion(this);
 618         this.panels.add(panel);
 619        /* if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
 620             // sinle panel - no tab...?? would it not be better to render it with the tabs,
 621             // and hide them... ???
 622             this.bodyEl.dom.appendChild(panel.getEl().dom);
 623             if(panel.background !== true){
 624                 this.setActivePanel(panel);
 625             }
 626             this.fireEvent("paneladded", this, panel);
 627             return panel;
 628         }
 629         */
 630         if(!this.tabs){
 631             this.initTabs();
 632         }else{
 633             this.initPanelAsTab(panel);
 634         }
 635
 636
 637         if(panel.background !== true){
 638             this.tabs.activate(panel.getEl().id);
 639         }
 640         this.fireEvent("paneladded", this, panel);
 641         return panel;
 642     },
 643
 644     /**
 645      * Hides the tab for the specified panel.
 646      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 647      */
 648     hidePanel : function(panel){
 649         if(this.tabs && (panel = this.getPanel(panel))){
 650             this.tabs.hideTab(panel.getEl().id);
 651         }
 652     },
 653
 654     /**
 655      * Unhides the tab for a previously hidden panel.
 656      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 657      */
 658     unhidePanel : function(panel){
 659         if(this.tabs && (panel = this.getPanel(panel))){
 660             this.tabs.unhideTab(panel.getEl().id);
 661         }
 662     },
 663
 664     clearPanels : function(){
 665         while(this.panels.getCount() > 0){
 666              this.remove(this.panels.first());
 667         }
 668     },
 669
 670     /**
 671      * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
 672      * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
 673      * @param {Boolean} preservePanel Overrides the config preservePanel option
 674      * @return {Roo.ContentPanel} The panel that was removed
 675      */
 676     remove : function(panel, preservePanel)
 677     {
 678         panel = this.getPanel(panel);
 679         if(!panel){
 680             return null;
 681         }
 682         var e = {};
 683         this.fireEvent("beforeremove", this, panel, e);
 684         if(e.cancel === true){
 685             return null;
 686         }
 687         preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
 688         var panelId = panel.getId();
 689         this.panels.removeKey(panelId);
 690         if(preservePanel){
 691             document.body.appendChild(panel.getEl().dom);
 692         }
 693         if(this.tabs){
 694             this.tabs.removeTab(panel.getEl().id);
 695         }else if (!preservePanel){
 696             this.bodyEl.dom.removeChild(panel.getEl().dom);
 697         }
 698         if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
 699             var p = this.panels.first();
 700             var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
 701             tempEl.appendChild(p.getEl().dom);
 702             this.bodyEl.update("");
 703             this.bodyEl.dom.appendChild(p.getEl().dom);
 704             tempEl = null;
 705             this.updateTitle(p.getTitle());
 706             this.tabs = null;
 707             this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
 708             this.setActivePanel(p);
 709         }
 710         panel.setRegion(null);
 711         if(this.activePanel == panel){
 712             this.activePanel = null;
 713         }
 714         if(this.config.autoDestroy !== false && preservePanel !== true){
 715             try{panel.destroy();}catch(e){}
 716         }
 717         this.fireEvent("panelremoved", this, panel);
 718         return panel;
 719     },
 720
 721     /**
 722      * Returns the TabPanel component used by this region
 723      * @return {Roo.TabPanel}
 724      */
 725     getTabs : function(){
 726         return this.tabs;
 727     },
 728
 729     createTool : function(parentEl, className){
 730         var btn = Roo.DomHelper.append(parentEl, {
 731             tag: "div",
 732             cls: "x-layout-tools-button",
 733             children: [ {
 734                 tag: "div",
 735                 cls: "roo-layout-tools-button-inner " + className,
 736                 html: "&#160;"
 737             }]
 738         }, true);
 739         btn.addClassOnOver("roo-layout-tools-button-over");
 740         return btn;
 741     }
 742 });