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