7 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
10 * @class Roo.bootstrap.dash.TabBox
11 * @extends Roo.bootstrap.Component
12 * Bootstrap TabBox class
13 * @cfg {String} title Title of the TabBox
14 * @cfg {String} icon Icon of the TabBox
15 * @cfg {Boolean} showtabs (true|false) show the tabs default true
19 * @param {Object} config The config object
23 Roo.bootstrap.dash.TabBox = function(config){
24 Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
27 Roo.bootstrap.dash.TabBox.register(this);
33 * When a pane is added
34 * @param {Roo.bootstrap.dash.TabPane} pane
41 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
47 getChildContainer : function()
49 return this.el.select('.tab-content', true).first();
52 getAutoCreate : function(){
56 cls: 'pull-left header',
64 cls: 'fa ' + this.icon
71 cls: 'nav-tabs-custom',
75 cls: 'nav nav-tabs pull-right',
82 cls: 'tab-content no-padding',
90 initEvents : function()
92 //Roo.log('add add pane handler');
93 this.on('addpane', this.onAddPane, this);
96 * Updates the box title
97 * @param {String} html to set the title to.
99 setTitle : function(value)
101 this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
103 onAddPane : function(pane)
105 //Roo.log('addpane');
107 // tabs are rendere left to right..
112 var ctr = this.el.select('.nav-tabs', true).first();
115 var existing = ctr.select('.nav-tab',true);
116 var qty = existing.getCount();;
119 var tab = ctr.createChild({
121 cls : 'nav-tab' + (qty ? '' : ' active'),
129 }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
132 tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
134 pane.el.addClass('active');
139 onTabClick : function(ev,un,ob,pane)
141 //Roo.log('tab - prev default');
145 this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
146 pane.tab.addClass('active');
147 //Roo.log(pane.title);
148 this.getChildContainer().select('.tab-pane',true).removeClass('active');
149 // technically we should have a deactivate event.. but maybe add later.
150 // and it should not de-activate the selected tab...
152 pane.el.addClass('active');
153 pane.fireEvent('activate');
163 Roo.apply(Roo.bootstrap.dash.TabBox, {
168 * @param {Roo.bootstrap.dash.TabBox} the box to add
170 register : function(box)
172 this.boxes[box.name] = box;
176 * fetch a box based on the box name
177 * if one does not exist , it will get created.
178 * @param {string} the box name
179 * @returns {Roo.bootstrap.dash.TabBox} the box
181 get: function(name) {
182 if (typeof(this.boxes[name]) == 'undefined') {
183 this.register(new Roo.bootstrap.dash.TabBox({ name : name }));
185 return this.boxes[name] ;