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