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 * @cfg {String} href click to link..
20 * Create a new TabPanel
21 * @param {Object} config The config object
24 Roo.bootstrap.TabPanel = function(config){
25 Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
29 * Fires when the active status changes
30 * @param {Roo.bootstrap.TabPanel} this
31 * @param {Boolean} state the new state
36 * @event beforedeactivate
37 * Fires before a tab is de-activated - can be used to do validation on a form.
38 * @param {Roo.bootstrap.TabPanel} this
39 * @return {Boolean} false if there is an error
42 'beforedeactivate': true
45 this.tabId = this.tabId || Roo.id();
49 Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, {
57 getAutoCreate : function(){
60 // item is needed for carousel - not sure if it has any effect otherwise
70 cfg.tabId = this.tabId;
77 initEvents: function()
79 var p = this.parent();
80 this.navId = this.navId || p.navId;
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);
88 var i = tg.tabs.length - 1;
90 if(this.active && tg.bullets > 0 && i < tg.bullets){
91 tg.setActiveBullet(i);
98 onRender : function(ct, position)
100 // Roo.log("Call onRender: " + this.xtype);
102 Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
110 setActive: function(state)
112 Roo.log("panel - set active " + this.tabId + "=" + state);
116 this.el.removeClass('active');
118 } else if (!this.el.hasClass('active')) {
119 this.el.addClass('active');
122 this.fireEvent('changed', this, state);