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              * @event beforedeactivate
  36              * Fires before a tab is de-activated - can be used to do validation on a form.
  37              * @param {Roo.bootstrap.TabPanel} this
  38              * @return {Boolean} false if there is an error
  39
  40          */
  41         'beforedeactivate': true
  42      });
  43
  44     this.tabId = this.tabId || Roo.id();
  45
  46 };
  47
  48 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component,  {
  49
  50     active: false,
  51     html: false,
  52     tabId: false,
  53     navId : false,
  54
  55     getAutoCreate : function(){
  56         var cfg = {
  57             tag: 'div',
  58             // item is needed for carousel - not sure if it has any effect otherwise
  59             cls: 'tab-pane item',
  60             html: this.html || ''
  61         };
  62
  63         if(this.active){
  64             cfg.cls += ' active';
  65         }
  66
  67         if(this.tabId){
  68             cfg.tabId = this.tabId;
  69         }
  70
  71
  72         return cfg;
  73     },
  74
  75     initEvents:  function()
  76     {
  77         Roo.log('-------- init events on tab panel ---------');
  78
  79         var p = this.parent();
  80         this.navId = this.navId || p.navId;
  81
  82         if (typeof(this.navId) != 'undefined') {
  83             // not really needed.. but just in case.. parent should be a NavGroup.
  84             var tg = Roo.bootstrap.TabGroup.get(this.navId);
  85             Roo.log(['register', tg, this]);
  86             tg.register(this);
  87
  88             var i = tg.tabs.length - 1;
  89
  90             if(this.active && tg.bullets > 0 && i < tg.bullets){
  91                 tg.setActiveBullet(i);
  92             }
  93         }
  94
  95     },
  96
  97
  98     onRender : function(ct, position)
  99     {
 100        // Roo.log("Call onRender: " + this.xtype);
 101
 102         Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
 103
 104
 105
 106
 107
 108     },
 109
 110     setActive: function(state)
 111     {
 112         Roo.log("panel - set active " + this.tabId + "=" + state);
 113
 114         this.active = state;
 115         if (!state) {
 116             this.el.removeClass('active');
 117
 118         } else  if (!this.el.hasClass('active')) {
 119             this.el.addClass('active');
 120         }
 121
 122         this.fireEvent('changed', this, state);
 123     }
 124
 125
 126 });
 127
 128
 129
 130
 131