* 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;
/**
* 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>'
+ )
);
}
var el = template.overwrite(td, {"text": text});
var inner = el.getElementsByTagName("span")[0];
- return {"el": el, "inner": inner};
+ return {"el": el, "inner": inner};
-// if(this.tabTpl){
-// el = this.tabTpl.overwrite(td, {"text": text});
-// } else {
-// el = new Roo.Template(
-// '<a href="#">' +
-// '<span unselectable="on"' +
-// (this.disableTooltips ? '' : ' title="{text}"') +
-// ' >{text}</span></a>'
-// );
-// }
-//
-// if(!this.tabTpl){
-//
-// this.tabTpl = new Roo.Template(
-// '<a href="#">' +
-// '<span unselectable="on"' +
-// (this.disableTooltips ? '' : ' title="{text}"') +
-// ' >{text}</span></a>'
-// );
-//
-// }
-//
-// if(tpl){
-// switch (typeof(tpl)) {
-// case 'object' :
-// this.tabTpl = tpl;
-// break;
-// case 'string' :
-// this.tabTpl = new Roo.Template(tpl);
-// break;
-// default :
-// break;
-// }
-// }
-//
-// var el = this.tabTpl.overwrite(td, {"text": text});
-//
-// var inner = el.getElementsByTagName("span")[0];
-// return {"el": el, "inner": inner};
- //}
}