git.roojs.org Git - roojs1/blob - Roo/bootstrap/TabPanel.js

   1 /*
   2  * - LGPL
   3  *
   4  * TabPanel
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TabPanel
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap TabPanel class
  12  * @cfg {Boolean} active panel active
  13  * @cfg {String} html panel content
  14  * @cfg {String} tabId tab relate id
  15  * @cfg {String} navId The navbar which triggers show hide
  16  *
  17  *
  18  * @constructor
  19  * Create a new TabPanel
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.TabPanel = function(config){
  24     Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
  25      this.addEvents({
  26         /**
  27              * @event changed
  28              * Fires when the active status changes
  29              * @param {Roo.bootstrap.TabPanel} this
  30              * @param {Boolean} state the new state
  31
  32          */
  33         'changed': true
  34      });
  35 };
  36
  37 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
  38
  39     active: false,
  40     html: false,
  41     tabId: false,
  42     navId : false,
  43
  44     getAutoCreate : function(){
  45         var cfg = {
  46             tag: 'div',
  47             cls: 'tab-pane',
  48             html: this.html || ''
  49         };
  50
  51         if(this.active){
  52             cfg.cls += ' active';
  53         }
  54
  55         if(this.tabId){
  56             cfg.tabId = this.tabId;
  57         }
  58
  59         return cfg;
  60     },
  61     onRender : function(ct, position)
  62     {
  63        // Roo.log("Call onRender: " + this.xtype);
  64
  65         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
  66
  67         if (this.navId && this.tabId) {
  68             var item = Roo.bootstrap.NavGroup.get(this.navId).getNavItem(this.tabId);
  69             if (!item) {
  70                 Roo.log("could not find navID:"  + this.navId + ", tabId: " + this.tabId);
  71             } else {
  72                 item.on('changed', function(item, state) {
  73                     this.setActive(state);
  74                 }, this);
  75             }
  76         }
  77
  78     },
  79     setActive: function(state)
  80     {
  81         Roo.log("panel - set active " + this.tabId + "=" + state);
  82
  83         this.active = state;
  84         if (!state) {
  85             this.el.removeClass('active');
  86
  87         } else  if (!this.el.hasClass('active')) {
  88             this.el.addClass('active');
  89         }
  90         this.fireEvent('changed', this, state);
  91     }
  92
  93
  94 });
  95
  96
  97
  98
  99