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