/**
* @class Roo.bootstrap.dash.TabBox
* @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.dash.TabPane
* Bootstrap TabBox class
* @cfg {String} title Title of the TabBox
* @cfg {String} icon Icon of the TabBox
+ * @cfg {Boolean} showtabs (true|false) show the tabs default true
+ * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
*
* @constructor
* Create a new TabBox
* When a pane is added
* @param {Roo.bootstrap.dash.TabPane} pane
*/
- "addpane" : true
+ "addpane" : true,
+ /**
+ * @event activatepane
+ * When a pane is activated
+ * @param {Roo.bootstrap.dash.TabPane} pane
+ */
+ "activatepane" : true
+
});
+
+ this.panes = [];
};
Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component, {
title : '',
icon : false,
+ showtabs : true,
+ tabScrollable : false,
getChildContainer : function()
{
});
}
+ var h = {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ };
+
+ if(this.tabScrollable){
+ h = {
+ tag: 'div',
+ cls: 'tab-header',
+ cn: [
+ {
+ tag: 'ul',
+ cls: 'nav nav-tabs pull-right',
+ cn: [
+ header
+ ]
+ }
+ ]
+ };
+ }
var cfg = {
tag: 'div',
cls: 'nav-tabs-custom',
cn: [
- {
- tag: 'ul',
- cls: 'nav nav-tabs pull-right',
- cn: [
- header
- ]
- },
+ h,
{
tag: 'div',
cls: 'tab-content no-padding',
cn: []
}
]
- }
+ };
return cfg;
},
},
onAddPane : function(pane)
{
+ this.panes.push(pane);
//Roo.log('addpane');
//Roo.log(pane);
// tabs are rendere left to right..
+ if(!this.showtabs){
+ return;
+ }
+
var ctr = this.el.select('.nav-tabs', true).first();
this.getChildContainer().select('.tab-pane',true).removeClass('active');
// technically we should have a deactivate event.. but maybe add later.
// and it should not de-activate the selected tab...
-
+ this.fireEvent('activatepane', pane);
pane.el.addClass('active');
pane.fireEvent('activate');
+ },
+
+ getActivePane : function()
+ {
+ var r = false;
+ Roo.each(this.panes, function(p) {
+ if(p.el.hasClass('active')){
+ r = p;
+ return false;
+ }
+
+ return;
+ });
+
+ return r;
}