* Adds an existing {@link Roo.TabPanelItem}.
* @param {Roo.TabPanelItem} item The TabPanelItem to add
*/
- addTabItem : function(item){
+ addTabItem : function(item)
+ {
this.items[item.id] = item;
this.items.push(item);
+ this.autoSizeTabs();
// if(this.resizeTabs){
// item.setWidth(this.currentTabWidth || this.preferredTabWidth);
// this.autoSizeTabs();
* @param {String/Number} id The id or index of the TabPanelItem to activate.
* @return {Roo.TabPanelItem} The TabPanelItem.
*/
- activate : function(id){
+ activate : function(id)
+ {
var tab = this.items[id];
if(!tab){
return null;
}
-
- if(this.fireEvent("beforetabchange", this, e, tab) !== false){
- if(tab == this.active || tab.disabled){
- return tab;
- }
-// var e = {};
-// this.fireEvent("beforetabchange", this, e, tab);
-// if(e.cancel !== true && !tab.disabled){
- if(this.active){
- this.active.hide();
- }
- this.active = this.items[id];
- this.active.show();
- this.fireEvent("tabchange", this, this.active);
-// }
+ if(tab == this.active || tab.disabled){
return tab;
}
-
-
+ var e = {};
+ this.fireEvent("beforetabchange", this, e, tab);
+ if(e.cancel !== true && !tab.disabled){
+ if(this.active){
+ this.active.hide();
+ }
+ this.active = this.items[id];
+ this.active.show();
+ this.fireEvent("tabchange", this, this.active);
+ }
+ return tab;
},
/**
/**
* Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
*/
- autoSizeTabs : function(){
+ autoSizeTabs : function()
+ {
var count = this.items.length;
var vcount = count - this.hiddenCount;
if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
return;
}
+ if (vcount < 2) {
+ this.stripEl.hide();
+ } else {
+ this.stripEl.show();
+ }
+
var w = Math.max(this.el.getWidth() - this.cpad, 10);
var availWidth = Math.floor(w / vcount);
var b = this.stripBody;
createStrip : function(container)
{
var strip = document.createElement("nav");
- strip.className = "navbar navbar-default"; //"x-tabs-wrap";
+ strip.className = Roo.bootstrap.version == 4 ?
+ "navbar-light bg-light" :
+ "navbar navbar-default"; //"x-tabs-wrap";
container.appendChild(strip);
return strip;
},
createStripElements : function(stripEl, text, closable, tpl)
{
var td = document.createElement("li"); // was td..
-
+ td.className = 'nav-item';
//stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
var template = tpl || this.tabTpl || false;
if(!template){
-
- template = new Roo.Template(
- '<a href="#">' +
- '<span unselectable="on"' +
- (this.disableTooltips ? '' : ' title="{text}"') +
- ' >{text}</span></a>'
+ template = new Roo.Template(
+ Roo.bootstrap.version == 4 ?
+ (
+ '<a class="nav-link" href="#" unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</a>'
+ ) : (
+ '<a class="nav-link" href="#">' +
+ '<span unselectable="on"' +
+ (this.disableTooltips ? '' : ' title="{text}"') +
+ ' >{text}</span></a>'
+ )
);
}