7 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
10 * @class Roo.bootstrap.dash.TabBox
11 * @extends Roo.bootstrap.Component
12 * @children Roo.bootstrap.dash.TabPane
13 * Bootstrap TabBox class
14 * @cfg {String} title Title of the TabBox
15 * @cfg {String} icon Icon of the TabBox
16 * @cfg {Boolean} showtabs (true|false) show the tabs default true
17 * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
21 * @param {Object} config The config object
25 Roo.bootstrap.dash.TabBox = function(config){
26 Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
31 * When a pane is added
32 * @param {Roo.bootstrap.dash.TabPane} pane
37 * When a pane is activated
38 * @param {Roo.bootstrap.dash.TabPane} pane
48 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
53 tabScrollable : false,
55 getChildContainer : function()
57 return this.el.select('.tab-content', true).first();
60 getAutoCreate : function(){
64 cls: 'pull-left header',
72 cls: 'fa ' + this.icon
78 cls: 'nav nav-tabs pull-right',
84 if(this.tabScrollable){
91 cls: 'nav nav-tabs pull-right',
102 cls: 'nav-tabs-custom',
107 cls: 'tab-content no-padding',
115 initEvents : function()
117 //Roo.log('add add pane handler');
118 this.on('addpane', this.onAddPane, this);
121 * Updates the box title
122 * @param {String} html to set the title to.
124 setTitle : function(value)
126 this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
128 onAddPane : function(pane)
130 this.panes.push(pane);
131 //Roo.log('addpane');
133 // tabs are rendere left to right..
138 var ctr = this.el.select('.nav-tabs', true).first();
141 var existing = ctr.select('.nav-tab',true);
142 var qty = existing.getCount();;
145 var tab = ctr.createChild({
147 cls : 'nav-tab' + (qty ? '' : ' active'),
155 }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
158 tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
160 pane.el.addClass('active');
165 onTabClick : function(ev,un,ob,pane)
167 //Roo.log('tab - prev default');
171 this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
172 pane.tab.addClass('active');
173 //Roo.log(pane.title);
174 this.getChildContainer().select('.tab-pane',true).removeClass('active');
175 // technically we should have a deactivate event.. but maybe add later.
176 // and it should not de-activate the selected tab...
177 this.fireEvent('activatepane', pane);
178 pane.el.addClass('active');
179 pane.fireEvent('activate');
184 getActivePane : function()
187 Roo.each(this.panes, function(p) {
188 if(p.el.hasClass('active')){