git.roojs.org Git - roojs1/blob - Roo/TabPanel.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  * @class Roo.TabPanel
  13  * @extends Roo.util.Observable
  14  * A lightweight tab container.
  15  * <br><br>
  16  * Usage:
  17  * <pre><code>
  18 // basic tabs 1, built from existing content
  19 var tabs = new Roo.TabPanel("tabs1");
  20 tabs.addTab("script", "View Script");
  21 tabs.addTab("markup", "View Markup");
  22 tabs.activate("script");
  23
  24 // more advanced tabs, built from javascript
  25 var jtabs = new Roo.TabPanel("jtabs");
  26 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
  27
  28 // set up the UpdateManager
  29 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
  30 var updater = tab2.getUpdateManager();
  31 updater.setDefaultUrl("ajax1.htm");
  32 tab2.on('activate', updater.refresh, updater, true);
  33
  34 // Use setUrl for Ajax loading
  35 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
  36 tab3.setUrl("ajax2.htm", null, true);
  37
  38 // Disabled tab
  39 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
  40 tab4.disable();
  41
  42 jtabs.activate("jtabs-1");
  43  * </code></pre>
  44  * @constructor
  45  * Create a new TabPanel.
  46  * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
  47  * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
  48  */
  49 Roo.TabPanel = function(container, config){
  50     /**
  51     * The container element for this TabPanel.
  52     * @type Roo.Element
  53     */
  54     this.el = Roo.get(container, true);
  55     if(config){
  56         if(typeof config == "boolean"){
  57             this.tabPosition = config ? "bottom" : "top";
  58         }else{
  59             Roo.apply(this, config);
  60         }
  61     }
  62     if(this.tabPosition == "bottom"){
  63         this.bodyEl = Roo.get(this.createBody(this.el.dom));
  64         this.el.addClass("x-tabs-bottom");
  65     }
  66     this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
  67     this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
  68     this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
  69     if(Roo.isIE){
  70         Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
  71     }
  72     if(this.tabPosition != "bottom"){
  73         /** The body element that contains {@link Roo.TabPanelItem} bodies. +
  74          * @type Roo.Element
  75          */
  76         this.bodyEl = Roo.get(this.createBody(this.el.dom));
  77         this.el.addClass("x-tabs-top");
  78     }
  79     this.items = [];
  80
  81     this.bodyEl.setStyle("position", "relative");
  82
  83     this.active = null;
  84     this.activateDelegate = this.activate.createDelegate(this);
  85
  86     this.addEvents({
  87         /**
  88          * @event tabchange
  89          * Fires when the active tab changes
  90          * @param {Roo.TabPanel} this
  91          * @param {Roo.TabPanelItem} activePanel The new active tab
  92          */
  93         "tabchange": true,
  94         /**
  95          * @event beforetabchange
  96          * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
  97          * @param {Roo.TabPanel} this
  98          * @param {Object} e Set cancel to true on this object to cancel the tab change
  99          * @param {Roo.TabPanelItem} tab The tab being changed to
 100          */
 101         "beforetabchange" : true
 102     });
 103
 104     Roo.EventManager.onWindowResize(this.onResize, this);
 105     this.cpad = this.el.getPadding("lr");
 106     this.hiddenCount = 0;
 107
 108
 109     // toolbar on the tabbar support...
 110     if (this.toolbar) {
 111         var tcfg = this.toolbar;
 112         tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
 113         this.toolbar = new Roo.Toolbar(tcfg);
 114     }
 115
 116
 117
 118     Roo.TabPanel.superclass.constructor.call(this);
 119 };
 120
 121 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
 122     /*
 123      *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
 124      */
 125     tabPosition : "top",
 126     /*
 127      *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
 128      */
 129     currentTabWidth : 0,
 130     /*
 131      *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
 132      */
 133     minTabWidth : 40,
 134     /*
 135      *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
 136      */
 137     maxTabWidth : 250,
 138     /*
 139      *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
 140      */
 141     preferredTabWidth : 175,
 142     /*
 143      *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
 144      */
 145     resizeTabs : false,
 146     /*
 147      *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
 148      */
 149     monitorResize : true,
 150     /*
 151      *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
 152      */
 153     toolbar : false,
 154
 155     /**
 156      * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
 157      * @param {String} id The id of the div to use <b>or create</b>
 158      * @param {String} text The text for the tab
 159      * @param {String} content (optional) Content to put in the TabPanelItem body
 160      * @param {Boolean} closable (optional) True to create a close icon on the tab
 161      * @return {Roo.TabPanelItem} The created TabPanelItem
 162      */
 163     addTab : function(id, text, content, closable){
 164         var item = new Roo.TabPanelItem(this, id, text, closable);
 165         this.addTabItem(item);
 166         if(content){
 167             item.setContent(content);
 168         }
 169         return item;
 170     },
 171
 172     /**
 173      * Returns the {@link Roo.TabPanelItem} with the specified id/index
 174      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
 175      * @return {Roo.TabPanelItem}
 176      */
 177     getTab : function(id){
 178         return this.items[id];
 179     },
 180
 181     /**
 182      * Hides the {@link Roo.TabPanelItem} with the specified id/index
 183      * @param {String/Number} id The id or index of the TabPanelItem to hide.
 184      */
 185     hideTab : function(id){
 186         var t = this.items[id];
 187         if(!t.isHidden()){
 188            t.setHidden(true);
 189            this.hiddenCount++;
 190            this.autoSizeTabs();
 191         }
 192     },
 193
 194     /**
 195      * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
 196      * @param {String/Number} id The id or index of the TabPanelItem to unhide.
 197      */
 198     unhideTab : function(id){
 199         var t = this.items[id];
 200         if(t.isHidden()){
 201            t.setHidden(false);
 202            this.hiddenCount--;
 203            this.autoSizeTabs();
 204         }
 205     },
 206
 207     /**
 208      * Adds an existing {@link Roo.TabPanelItem}.
 209      * @param {Roo.TabPanelItem} item The TabPanelItem to add
 210      */
 211     addTabItem : function(item){
 212         this.items[item.id] = item;
 213         this.items.push(item);
 214         if(this.resizeTabs){
 215            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
 216            this.autoSizeTabs();
 217         }else{
 218             item.autoSize();
 219         }
 220     },
 221
 222     /**
 223      * Removes a {@link Roo.TabPanelItem}.
 224      * @param {String/Number} id The id or index of the TabPanelItem to remove.
 225      */
 226     removeTab : function(id){
 227         var items = this.items;
 228         var tab = items[id];
 229         if(!tab) { return; }
 230         var index = items.indexOf(tab);
 231         if(this.active == tab && items.length > 1){
 232             var newTab = this.getNextAvailable(index);
 233             if(newTab) {
 234                 newTab.activate();
 235             }
 236         }
 237         this.stripEl.dom.removeChild(tab.pnode.dom);
 238         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
 239             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
 240         }
 241         items.splice(index, 1);
 242         delete this.items[tab.id];
 243         tab.fireEvent("close", tab);
 244         tab.purgeListeners();
 245         this.autoSizeTabs();
 246     },
 247
 248     getNextAvailable : function(start){
 249         var items = this.items;
 250         var index = start;
 251         // look for a next tab that will slide over to
 252         // replace the one being removed
 253         while(index < items.length){
 254             var item = items[++index];
 255             if(item && !item.isHidden()){
 256                 return item;
 257             }
 258         }
 259         // if one isn't found select the previous tab (on the left)
 260         index = start;
 261         while(index >= 0){
 262             var item = items[--index];
 263             if(item && !item.isHidden()){
 264                 return item;
 265             }
 266         }
 267         return null;
 268     },
 269
 270     /**
 271      * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
 272      * @param {String/Number} id The id or index of the TabPanelItem to disable.
 273      */
 274     disableTab : function(id){
 275         var tab = this.items[id];
 276         if(tab && this.active != tab){
 277             tab.disable();
 278         }
 279     },
 280
 281     /**
 282      * Enables a {@link Roo.TabPanelItem} that is disabled.
 283      * @param {String/Number} id The id or index of the TabPanelItem to enable.
 284      */
 285     enableTab : function(id){
 286         var tab = this.items[id];
 287         tab.enable();
 288     },
 289
 290     /**
 291      * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
 292      * @param {String/Number} id The id or index of the TabPanelItem to activate.
 293      * @return {Roo.TabPanelItem} The TabPanelItem.
 294      */
 295     activate : function(id){
 296         var tab = this.items[id];
 297         if(!tab){
 298             return null;
 299         }
 300         if(tab == this.active || tab.disabled){
 301             return tab;
 302         }
 303         var e = {};
 304         this.fireEvent("beforetabchange", this, e, tab);
 305         if(e.cancel !== true && !tab.disabled){
 306             if(this.active){
 307                 this.active.hide();
 308             }
 309             this.active = this.items[id];
 310             this.active.show();
 311             this.fireEvent("tabchange", this, this.active);
 312         }
 313         return tab;
 314     },
 315
 316     /**
 317      * Gets the active {@link Roo.TabPanelItem}.
 318      * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
 319      */
 320     getActiveTab : function(){
 321         return this.active;
 322     },
 323
 324     /**
 325      * Updates the tab body element to fit the height of the container element
 326      * for overflow scrolling
 327      * @param {Number} targetHeight (optional) Override the starting height from the elements height
 328      */
 329     syncHeight : function(targetHeight){
 330         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
 331         var bm = this.bodyEl.getMargins();
 332         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
 333         this.bodyEl.setHeight(newHeight);
 334         return newHeight;
 335     },
 336
 337     onResize : function(){
 338         if(this.monitorResize){
 339             this.autoSizeTabs();
 340         }
 341     },
 342
 343     /**
 344      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
 345      */
 346     beginUpdate : function(){
 347         this.updating = true;
 348     },
 349
 350     /**
 351      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
 352      */
 353     endUpdate : function(){
 354         this.updating = false;
 355         this.autoSizeTabs();
 356     },
 357
 358     /**
 359      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
 360      */
 361     autoSizeTabs : function(){
 362         var count = this.items.length;
 363         var vcount = count - this.hiddenCount;
 364         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
 365         var w = Math.max(this.el.getWidth() - this.cpad, 10);
 366         var availWidth = Math.floor(w / vcount);
 367         var b = this.stripBody;
 368         if(b.getWidth() > w){
 369             var tabs = this.items;
 370             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
 371             if(availWidth < this.minTabWidth){
 372                 /*if(!this.sleft){    // incomplete scrolling code
 373                     this.createScrollButtons();
 374                 }
 375                 this.showScroll();
 376                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
 377             }
 378         }else{
 379             if(this.currentTabWidth < this.preferredTabWidth){
 380                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
 381             }
 382         }
 383     },
 384
 385     /**
 386      * Returns the number of tabs in this TabPanel.
 387      * @return {Number}
 388      */
 389      getCount : function(){
 390          return this.items.length;
 391      },
 392
 393     /**
 394      * Resizes all the tabs to the passed width
 395      * @param {Number} The new width
 396      */
 397     setTabWidth : function(width){
 398         this.currentTabWidth = width;
 399         for(var i = 0, len = this.items.length; i < len; i++) {
 400                 if(!this.items[i].isHidden())this.items[i].setWidth(width);
 401         }
 402     },
 403
 404     /**
 405      * Destroys this TabPanel
 406      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
 407      */
 408     destroy : function(removeEl){
 409         Roo.EventManager.removeResizeListener(this.onResize, this);
 410         for(var i = 0, len = this.items.length; i < len; i++){
 411             this.items[i].purgeListeners();
 412         }
 413         if(removeEl === true){
 414             this.el.update("");
 415             this.el.remove();
 416         }
 417     }
 418 });
 419
 420 /**
 421  * @class Roo.TabPanelItem
 422  * @extends Roo.util.Observable
 423  * Represents an individual item (tab plus body) in a TabPanel.
 424  * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
 425  * @param {String} id The id of this TabPanelItem
 426  * @param {String} text The text for the tab of this TabPanelItem
 427  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
 428  */
 429 Roo.TabPanelItem = function(tabPanel, id, text, closable){
 430     /**
 431      * The {@link Roo.TabPanel} this TabPanelItem belongs to
 432      * @type Roo.TabPanel
 433      */
 434     this.tabPanel = tabPanel;
 435     /**
 436      * The id for this TabPanelItem
 437      * @type String
 438      */
 439     this.id = id;
 440     /** @private */
 441     this.disabled = false;
 442     /** @private */
 443     this.text = text;
 444     /** @private */
 445     this.loaded = false;
 446     this.closable = closable;
 447
 448     /**
 449      * The body element for this TabPanelItem.
 450      * @type Roo.Element
 451      */
 452     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
 453     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
 454     this.bodyEl.setStyle("display", "block");
 455     this.bodyEl.setStyle("zoom", "1");
 456     this.hideAction();
 457
 458     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
 459     /** @private */
 460     this.el = Roo.get(els.el, true);
 461     this.inner = Roo.get(els.inner, true);
 462     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
 463     this.pnode = Roo.get(els.el.parentNode, true);
 464     this.el.on("mousedown", this.onTabMouseDown, this);
 465     this.el.on("click", this.onTabClick, this);
 466     /** @private */
 467     if(closable){
 468         var c = Roo.get(els.close, true);
 469         c.dom.title = this.closeText;
 470         c.addClassOnOver("close-over");
 471         c.on("click", this.closeClick, this);
 472      }
 473
 474     this.addEvents({
 475          /**
 476          * @event activate
 477          * Fires when this tab becomes the active tab.
 478          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 479          * @param {Roo.TabPanelItem} this
 480          */
 481         "activate": true,
 482         /**
 483          * @event beforeclose
 484          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
 485          * @param {Roo.TabPanelItem} this
 486          * @param {Object} e Set cancel to true on this object to cancel the close.
 487          */
 488         "beforeclose": true,
 489         /**
 490          * @event close
 491          * Fires when this tab is closed.
 492          * @param {Roo.TabPanelItem} this
 493          */
 494          "close": true,
 495         /**
 496          * @event deactivate
 497          * Fires when this tab is no longer the active tab.
 498          * @param {Roo.TabPanel} tabPanel The parent TabPanel
 499          * @param {Roo.TabPanelItem} this
 500          */
 501          "deactivate" : true
 502     });
 503     this.hidden = false;
 504
 505     Roo.TabPanelItem.superclass.constructor.call(this);
 506 };
 507
 508 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
 509     purgeListeners : function(){
 510        Roo.util.Observable.prototype.purgeListeners.call(this);
 511        this.el.removeAllListeners();
 512     },
 513     /**
 514      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
 515      */
 516     show : function(){
 517         this.pnode.addClass("on");
 518         this.showAction();
 519         if(Roo.isOpera){
 520             this.tabPanel.stripWrap.repaint();
 521         }
 522         this.fireEvent("activate", this.tabPanel, this);
 523     },
 524
 525     /**
 526      * Returns true if this tab is the active tab.
 527      * @return {Boolean}
 528      */
 529     isActive : function(){
 530         return this.tabPanel.getActiveTab() == this;
 531     },
 532
 533     /**
 534      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
 535      */
 536     hide : function(){
 537         this.pnode.removeClass("on");
 538         this.hideAction();
 539         this.fireEvent("deactivate", this.tabPanel, this);
 540     },
 541
 542     hideAction : function(){
 543         this.bodyEl.hide();
 544         this.bodyEl.setStyle("position", "absolute");
 545         this.bodyEl.setLeft("-20000px");
 546         this.bodyEl.setTop("-20000px");
 547     },
 548
 549     showAction : function(){
 550         this.bodyEl.setStyle("position", "relative");
 551         this.bodyEl.setTop("");
 552         this.bodyEl.setLeft("");
 553         this.bodyEl.show();
 554     },
 555
 556     /**
 557      * Set the tooltip for the tab.
 558      * @param {String} tooltip The tab's tooltip
 559      */
 560     setTooltip : function(text){
 561         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
 562             this.textEl.dom.qtip = text;
 563             this.textEl.dom.removeAttribute('title');
 564         }else{
 565             this.textEl.dom.title = text;
 566         }
 567     },
 568
 569     onTabClick : function(e){
 570         e.preventDefault();
 571         this.tabPanel.activate(this.id);
 572     },
 573
 574     onTabMouseDown : function(e){
 575         e.preventDefault();
 576         this.tabPanel.activate(this.id);
 577     },
 578
 579     getWidth : function(){
 580         return this.inner.getWidth();
 581     },
 582
 583     setWidth : function(width){
 584         var iwidth = width - this.pnode.getPadding("lr");
 585         this.inner.setWidth(iwidth);
 586         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
 587         this.pnode.setWidth(width);
 588     },
 589
 590     /**
 591      * Show or hide the tab
 592      * @param {Boolean} hidden True to hide or false to show.
 593      */
 594     setHidden : function(hidden){
 595         this.hidden = hidden;
 596         this.pnode.setStyle("display", hidden ? "none" : "");
 597     },
 598
 599     /**
 600      * Returns true if this tab is "hidden"
 601      * @return {Boolean}
 602      */
 603     isHidden : function(){
 604         return this.hidden;
 605     },
 606
 607     /**
 608      * Returns the text for this tab
 609      * @return {String}
 610      */
 611     getText : function(){
 612         return this.text;
 613     },
 614
 615     autoSize : function(){
 616         //this.el.beginMeasure();
 617         this.textEl.setWidth(1);
 618         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr"));
 619         //this.el.endMeasure();
 620     },
 621
 622     /**
 623      * Sets the text for the tab (Note: this also sets the tooltip text)
 624      * @param {String} text The tab's text and tooltip
 625      */
 626     setText : function(text){
 627         this.text = text;
 628         this.textEl.update(text);
 629         this.setTooltip(text);
 630         if(!this.tabPanel.resizeTabs){
 631             this.autoSize();
 632         }
 633     },
 634     /**
 635      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
 636      */
 637     activate : function(){
 638         this.tabPanel.activate(this.id);
 639     },
 640
 641     /**
 642      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
 643      */
 644     disable : function(){
 645         if(this.tabPanel.active != this){
 646             this.disabled = true;
 647             this.pnode.addClass("disabled");
 648         }
 649     },
 650
 651     /**
 652      * Enables this TabPanelItem if it was previously disabled.
 653      */
 654     enable : function(){
 655         this.disabled = false;
 656         this.pnode.removeClass("disabled");
 657     },
 658
 659     /**
 660      * Sets the content for this TabPanelItem.
 661      * @param {String} content The content
 662      * @param {Boolean} loadScripts true to look for and load scripts
 663      */
 664     setContent : function(content, loadScripts){
 665         this.bodyEl.update(content, loadScripts);
 666     },
 667
 668     /**
 669      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
 670      * @return {Roo.UpdateManager} The UpdateManager
 671      */
 672     getUpdateManager : function(){
 673         return this.bodyEl.getUpdateManager();
 674     },
 675
 676     /**
 677      * Set a URL to be used to load the content for this TabPanelItem.
 678      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
 679      * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
 680      * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
 681      * @return {Roo.UpdateManager} The UpdateManager
 682      */
 683     setUrl : function(url, params, loadOnce){
 684         if(this.refreshDelegate){
 685             this.un('activate', this.refreshDelegate);
 686         }
 687         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
 688         this.on("activate", this.refreshDelegate);
 689         return this.bodyEl.getUpdateManager();
 690     },
 691
 692     /** @private */
 693     _handleRefresh : function(url, params, loadOnce){
 694         if(!loadOnce || !this.loaded){
 695             var updater = this.bodyEl.getUpdateManager();
 696             updater.update(url, params, this._setLoaded.createDelegate(this));
 697         }
 698     },
 699
 700     /**
 701      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
 702      *   Will fail silently if the setUrl method has not been called.
 703      *   This does not activate the panel, just updates its content.
 704      */
 705     refresh : function(){
 706         if(this.refreshDelegate){
 707            this.loaded = false;
 708            this.refreshDelegate();
 709         }
 710     },
 711
 712     /** @private */
 713     _setLoaded : function(){
 714         this.loaded = true;
 715     },
 716
 717     /** @private */
 718     closeClick : function(e){
 719         var o = {};
 720         e.stopEvent();
 721         this.fireEvent("beforeclose", this, o);
 722         if(o.cancel !== true){
 723             this.tabPanel.removeTab(this.id);
 724         }
 725     },
 726     /**
 727      * The text displayed in the tooltip for the close icon.
 728      * @type String
 729      */
 730     closeText : "Close this tab"
 731 });
 732
 733 /** @private */
 734 Roo.TabPanel.prototype.createStrip = function(container){
 735     var strip = document.createElement("div");
 736     strip.className = "x-tabs-wrap";
 737     container.appendChild(strip);
 738     return strip;
 739 };
 740 /** @private */
 741 Roo.TabPanel.prototype.createStripList = function(strip){
 742     // div wrapper for retard IE
 743     // returns the "tr" element.
 744     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
 745         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
 746         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
 747     return strip.firstChild.firstChild.firstChild.firstChild;
 748 };
 749 /** @private */
 750 Roo.TabPanel.prototype.createBody = function(container){
 751     var body = document.createElement("div");
 752     Roo.id(body, "tab-body");
 753     Roo.fly(body).addClass("x-tabs-body");
 754     container.appendChild(body);
 755     return body;
 756 };
 757 /** @private */
 758 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
 759     var body = Roo.getDom(id);
 760     if(!body){
 761         body = document.createElement("div");
 762         body.id = id;
 763     }
 764     Roo.fly(body).addClass("x-tabs-item-body");
 765     bodyEl.insertBefore(body, bodyEl.firstChild);
 766     return body;
 767 };
 768 /** @private */
 769 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
 770     var td = document.createElement("td");
 771     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
 772     //stripEl.appendChild(td);
 773     if(closable){
 774         td.className = "x-tabs-closable";
 775         if(!this.closeTpl){
 776             this.closeTpl = new Roo.Template(
 777                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 778                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
 779                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
 780             );
 781         }
 782         var el = this.closeTpl.overwrite(td, {"text": text});
 783         var close = el.getElementsByTagName("div")[0];
 784         var inner = el.getElementsByTagName("em")[0];
 785         return {"el": el, "close": close, "inner": inner};
 786     } else {
 787         if(!this.tabTpl){
 788             this.tabTpl = new Roo.Template(
 789                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 790                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
 791             );
 792         }
 793         var el = this.tabTpl.overwrite(td, {"text": text});
 794         var inner = el.getElementsByTagName("em")[0];
 795         return {"el": el, "inner": inner};
 796     }
 797 };