git.roojs.org Git - roojs1/blob - Roo/panel/Tab.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.panel.Tab
  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.panel.Tab("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.panel.Tab("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.panel.Tab = 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.panel.TabItem} 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.panel.Tab} this
  91          * @param {Roo.panel.TabItem} 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.panel.Tab} this
  98          * @param {Object} e Set cancel to true on this object to cancel the tab change
  99          * @param {Roo.panel.TabItem} 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.panel.Tab.superclass.constructor.call(this);
 124 };
 125
 126 Roo.extend(Roo.panel.Tab, 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.panel.TabItem} 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.panel.TabItem} The created TabPanelItem
 167      */
 168     addTab : function(id, text, content, closable){
 169         var item = new Roo.panel.TabItem(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.panel.TabItem} with the specified id/index
 179      * @param {String/Number} id The id or index of the TabPanelItem to fetch.
 180      * @return {Roo.panel.TabItem}
 181      */
 182     getTab : function(id){
 183         return this.items[id];
 184     },
 185
 186     /**
 187      * Hides the {@link Roo.panel.TabItem} 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.panel.TabItem} 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.panel.TabItem}.
 214      * @param {Roo.panel.TabItem} item The TabPanelItem to add
 215      */
 216     addTabItem : function(item){
 217         this.items[item.id] = item;
 218         this.items.push(item);
 219         if(this.resizeTabs){
 220            item.setWidth(this.currentTabWidth || this.preferredTabWidth);
 221            this.autoSizeTabs();
 222         }else{
 223             item.autoSize();
 224         }
 225     },
 226
 227     /**
 228      * Removes a {@link Roo.panel.TabItem}.
 229      * @param {String/Number} id The id or index of the TabPanelItem to remove.
 230      */
 231     removeTab : function(id){
 232         var items = this.items;
 233         var tab = items[id];
 234         if(!tab) { return; }
 235         var index = items.indexOf(tab);
 236         if(this.active == tab && items.length > 1){
 237             var newTab = this.getNextAvailable(index);
 238             if(newTab) {
 239                 newTab.activate();
 240             }
 241         }
 242         this.stripEl.dom.removeChild(tab.pnode.dom);
 243         if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
 244             this.bodyEl.dom.removeChild(tab.bodyEl.dom);
 245         }
 246         items.splice(index, 1);
 247         delete this.items[tab.id];
 248         tab.fireEvent("close", tab);
 249         tab.purgeListeners();
 250         this.autoSizeTabs();
 251     },
 252
 253     getNextAvailable : function(start){
 254         var items = this.items;
 255         var index = start;
 256         // look for a next tab that will slide over to
 257         // replace the one being removed
 258         while(index < items.length){
 259             var item = items[++index];
 260             if(item && !item.isHidden()){
 261                 return item;
 262             }
 263         }
 264         // if one isn't found select the previous tab (on the left)
 265         index = start;
 266         while(index >= 0){
 267             var item = items[--index];
 268             if(item && !item.isHidden()){
 269                 return item;
 270             }
 271         }
 272         return null;
 273     },
 274
 275     /**
 276      * Disables a {@link Roo.panel.TabItem}. It cannot be the active tab, if it is this call is ignored.
 277      * @param {String/Number} id The id or index of the TabPanelItem to disable.
 278      */
 279     disableTab : function(id){
 280         var tab = this.items[id];
 281         if(tab && this.active != tab){
 282             tab.disable();
 283         }
 284     },
 285
 286     /**
 287      * Enables a {@link Roo.panel.TabItem} that is disabled.
 288      * @param {String/Number} id The id or index of the TabPanelItem to enable.
 289      */
 290     enableTab : function(id){
 291         var tab = this.items[id];
 292         tab.enable();
 293     },
 294
 295     /**
 296      * Activates a {@link Roo.panel.TabItem}. The currently active one will be deactivated.
 297      * @param {String/Number} id The id or index of the TabPanelItem to activate.
 298      * @return {Roo.panel.TabItem} The TabPanelItem.
 299      */
 300     activate : function(id){
 301         var tab = this.items[id];
 302         if(!tab){
 303             return null;
 304         }
 305         if(tab == this.active || tab.disabled){
 306             return tab;
 307         }
 308         var e = {};
 309         this.fireEvent("beforetabchange", this, e, tab);
 310         if(e.cancel !== true && !tab.disabled){
 311             if(this.active){
 312                 this.active.hide();
 313             }
 314             this.active = this.items[id];
 315             this.active.show();
 316             this.fireEvent("tabchange", this, this.active);
 317         }
 318         return tab;
 319     },
 320
 321     /**
 322      * Gets the active {@link Roo.panel.TabItem}.
 323      * @return {Roo.panel.TabItem} The active TabPanelItem or null if none are active.
 324      */
 325     getActiveTab : function(){
 326         return this.active;
 327     },
 328
 329     /**
 330      * Updates the tab body element to fit the height of the container element
 331      * for overflow scrolling
 332      * @param {Number} targetHeight (optional) Override the starting height from the elements height
 333      */
 334     syncHeight : function(targetHeight){
 335         var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
 336         var bm = this.bodyEl.getMargins();
 337         var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
 338         this.bodyEl.setHeight(newHeight);
 339         return newHeight;
 340     },
 341
 342     onResize : function(){
 343         if(this.monitorResize){
 344             this.autoSizeTabs();
 345         }
 346     },
 347
 348     /**
 349      * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
 350      */
 351     beginUpdate : function(){
 352         this.updating = true;
 353     },
 354
 355     /**
 356      * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
 357      */
 358     endUpdate : function(){
 359         this.updating = false;
 360         this.autoSizeTabs();
 361     },
 362
 363     /**
 364      * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
 365      */
 366     autoSizeTabs : function(){
 367         var count = this.items.length;
 368         var vcount = count - this.hiddenCount;
 369         if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
 370             return;
 371         }
 372         var w = Math.max(this.el.getWidth() - this.cpad, 10);
 373         var availWidth = Math.floor(w / vcount);
 374         var b = this.stripBody;
 375         if(b.getWidth() > w){
 376             var tabs = this.items;
 377             this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
 378             if(availWidth < this.minTabWidth){
 379                 /*if(!this.sleft){    // incomplete scrolling code
 380                     this.createScrollButtons();
 381                 }
 382                 this.showScroll();
 383                 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
 384             }
 385         }else{
 386             if(this.currentTabWidth < this.preferredTabWidth){
 387                 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
 388             }
 389         }
 390     },
 391
 392     /**
 393      * Returns the number of tabs in this TabPanel.
 394      * @return {Number}
 395      */
 396      getCount : function(){
 397          return this.items.length;
 398      },
 399
 400     /**
 401      * Resizes all the tabs to the passed width
 402      * @param {Number} The new width
 403      */
 404     setTabWidth : function(width){
 405         this.currentTabWidth = width;
 406         for(var i = 0, len = this.items.length; i < len; i++) {
 407                 if(!this.items[i].isHidden()) {
 408                 this.items[i].setWidth(width);
 409             }
 410         }
 411     },
 412
 413     /**
 414      * Destroys this TabPanel
 415      * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
 416      */
 417     destroy : function(removeEl){
 418         Roo.EventManager.removeResizeListener(this.onResize, this);
 419         for(var i = 0, len = this.items.length; i < len; i++){
 420             this.items[i].purgeListeners();
 421         }
 422         if(removeEl === true){
 423             this.el.update("");
 424             this.el.remove();
 425         }
 426     }
 427 });
 428
 429
 430 /** @private */
 431 Roo.panel.Tab.prototype.createStripList = function(strip){
 432     // div wrapper for retard IE
 433     // returns the "tr" element.
 434     strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
 435         '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
 436         '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
 437     return strip.firstChild.firstChild.firstChild.firstChild;
 438 };
 439 /** @private */
 440 Roo.panel.Tab.prototype.createBody = function(container){
 441     var body = document.createElement("div");
 442     Roo.id(body, "tab-body");
 443     Roo.fly(body).addClass("x-tabs-body");
 444     container.appendChild(body);
 445     return body;
 446 };
 447 /** @private */
 448 Roo.panel.Tab.prototype.createItemBody = function(bodyEl, id){
 449     var body = Roo.getDom(id);
 450     if(!body){
 451         body = document.createElement("div");
 452         body.id = id;
 453     }
 454     Roo.fly(body).addClass("x-tabs-item-body");
 455     bodyEl.insertBefore(body, bodyEl.firstChild);
 456     return body;
 457 };
 458 /** @private */
 459 Roo.panel.Tab.prototype.createStripElements = function(stripEl, text, closable){
 460     var td = document.createElement("td");
 461     stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
 462     //stripEl.appendChild(td);
 463     if(closable){
 464         td.className = "x-tabs-closable";
 465         if(!this.closeTpl){
 466             this.closeTpl = new Roo.Template(
 467                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 468                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
 469                '<div unselectable="on" class="close-icon">&#160;</div></em></span></a>'
 470             );
 471         }
 472         var el = this.closeTpl.overwrite(td, {"text": text});
 473         var close = el.getElementsByTagName("div")[0];
 474         var inner = el.getElementsByTagName("em")[0];
 475         return {"el": el, "close": close, "inner": inner};
 476     } else {
 477         if(!this.tabTpl){
 478             this.tabTpl = new Roo.Template(
 479                '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
 480                '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
 481             );
 482         }
 483         var el = this.tabTpl.overwrite(td, {"text": text});
 484         var inner = el.getElementsByTagName("em")[0];
 485         return {"el": el, "inner": inner};
 486     }
 487 };