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