426ae54c66c53b914864a6e97000655f47179841
[roojs1] / 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(e, item, state) {
73                     Roo.log(e);
74                     this.setActive(state);
75                 }, this, e);
76             }
77         }
78         
79     },
80     setActive: function(state)
81     {
82         Roo.log("panel - set active " + this.tabId + "=" + state);
83         
84         this.active = state;
85         if (!state) {
86             this.el.removeClass('active');
87             
88         } else  if (!this.el.hasClass('active')) {
89             this.el.addClass('active');
90         }
91         this.fireEvent('changed', this, state);
92     }
93     
94     
95 });
96  
97
98  
99
100