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