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  unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
  15  * @cfg {String} navId The Roo.bootstrap.NavGroup 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     this.tabId = this.tabId || Roo.id();
  36
  37 };
  38
  39 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
  40
  41     active: false,
  42     html: false,
  43     tabId: false,
  44     navId : false,
  45
  46     getAutoCreate : function(){
  47         var cfg = {
  48             tag: 'div',
  49             cls: 'tab-pane',
  50             html: this.html || ''
  51         };
  52
  53         if(this.active){
  54             cfg.cls += ' active';
  55         }
  56
  57         if(this.tabId){
  58             cfg.tabId = this.tabId;
  59         }
  60
  61         return cfg;
  62     },
  63
  64     initEvents:  function()
  65     {
  66         Roo.log('-------- init events on tab panel ---------');
  67
  68         var p = this.parent();
  69         this.navId = this.navId || p.navId;
  70
  71         if (typeof(this.navId) != 'undefined') {
  72             // not really needed.. but just in case.. parent should be a NavGroup.
  73             var tg = Roo.bootstrap.TabGroup.get(this.navId);
  74              Roo.log(['register', tg, this]);
  75             tg.register(this);
  76         }
  77     },
  78
  79
  80     onRender : function(ct, position)
  81     {
  82        // Roo.log("Call onRender: " + this.xtype);
  83
  84         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
  85
  86         // registration with navgroups..
  87         if (this.navId && this.tabId) {
  88             var grp = Roo.bootstrap.NavGroup.get(this.navId);
  89             if (grp) {
  90                 //code
  91                 var item = grp.getNavItem(this.tabId);
  92                 if (!item) {
  93                     Roo.log("could not find navID:"  + this.navId + ", tabId: " + this.tabId);
  94                 } else {
  95                     item.on('changed', function(item, state) {
  96                         this.setActive(state);
  97                     }, this);
  98                 }
  99             }
 100         }
 101
 102
 103
 104     },
 105     setActive: function(state)
 106     {
 107         Roo.log("panel - set active " + this.tabId + "=" + state);
 108
 109         this.active = state;
 110         if (!state) {
 111             this.el.removeClass('active');
 112
 113         } else  if (!this.el.hasClass('active')) {
 114             this.el.addClass('active');
 115         }
 116         this.fireEvent('changed', this, state);
 117     }
 118
 119
 120 });
 121
 122
 123
 124
 125