* The container element for this TabPanel.
* @type Roo.Element
*/
- this.el = Roo.get(config.el, true);
+ this.el = Roo.get(config.el);
+ delete config.el;
if(config){
if(typeof config == "boolean"){
this.tabPosition = config ? "bottom" : "top";
* @type Roo.Element
*/
this.bodyEl = Roo.get(this.createBody(this.el.dom));
- this.el.addClass("x-tabs-top");
+ this.el.addClass("roo-tabs-top");
}
this.items = [];
- Roo.TabPanel.superclass.constructor.call(this);
+ Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
};
Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
* @param {Boolean} closable (optional) True to create a close icon on the tab
* @return {Roo.TabPanelItem} The created TabPanelItem
*/
- addTab : function(id, text, content, closable)
+ addTab : function(id, text, content, closable, tpl)
{
- var item = Roo.bootstrap.panel.TabItem({
+ var item = new Roo.bootstrap.panel.TabItem({
panel: this,
id : id,
text : text,
- closable : closable
+ closable : closable,
+ tpl : tpl
});
this.addTabItem(item);
if(content){
* 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);
- if(this.resizeTabs){
- item.setWidth(this.currentTabWidth || this.preferredTabWidth);
- this.autoSizeTabs();
- }else{
- item.autoSize();
- }
+ this.autoSizeTabs();
+ // if(this.resizeTabs){
+ // item.setWidth(this.currentTabWidth || this.preferredTabWidth);
+ // this.autoSizeTabs();
+// }else{
+// item.autoSize();
+ // }
},
/**
* @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 (vcount < 2) {
+ this.stripEl.hide();
+ } else {
+ this.stripEl.show();
+ }
+
if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
return;
}
+
+
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;
},
{
// div wrapper for retard IE
// returns the "tr" element.
- strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
- '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
- '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
- return strip.firstChild.firstChild.firstChild.firstChild;
+ strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
+ //'<div class="x-tabs-strip-wrap">'+
+ // '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
+ // '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
+ return strip.firstChild; //.firstChild.firstChild.firstChild;
},
createBody : function(container)
{
var body = document.createElement("div");
Roo.id(body, "tab-body");
- Roo.fly(body).addClass("x-tabs-body");
+ //Roo.fly(body).addClass("x-tabs-body");
+ Roo.fly(body).addClass("tab-content");
container.appendChild(body);
return body;
},
body = document.createElement("div");
body.id = id;
}
- Roo.fly(body).addClass("x-tabs-item-body");
- bodyEl.insertBefore(body, bodyEl.firstChild);
+ //Roo.fly(body).addClass("x-tabs-item-body");
+ Roo.fly(body).addClass("tab-pane");
+ bodyEl.insertBefore(body, bodyEl.firstChild);
return body;
},
/** @private */
- createStripElements : function(stripEl, text, closable){
- var td = document.createElement("td");
- stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
- //stripEl.appendChild(td);
- if(closable){
+ 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]);
+
+
+ stripEl.appendChild(td);
+ /*if(closable){
td.className = "x-tabs-closable";
if(!this.closeTpl){
this.closeTpl = new Roo.Template(
var inner = el.getElementsByTagName("em")[0];
return {"el": el, "close": close, "inner": inner};
} else {
- if(!this.tabTpl){
- this.tabTpl = new Roo.Template(
- '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
- '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
+ */
+ // not sure what this is..
+// if(!this.tabTpl){
+ //this.tabTpl = new Roo.Template(
+ // '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
+ // '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
+ //);
+// this.tabTpl = new Roo.Template(
+// '<a href="#">' +
+// '<span unselectable="on"' +
+// (this.disableTooltips ? '' : ' title="{text}"') +
+// ' >{text}</span></a>'
+// );
+//
+// }
+
+
+ var template = tpl || this.tabTpl || false;
+
+ if(!template){
+ 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 = this.tabTpl.overwrite(td, {"text": text});
- var inner = el.getElementsByTagName("em")[0];
+
+ switch (typeof(template)) {
+ case 'object' :
+ break;
+ case 'string' :
+ template = new Roo.Template(template);
+ break;
+ default :
+ break;
+ }
+
+ var el = template.overwrite(td, {"text": text});
+
+ var inner = el.getElementsByTagName("span")[0];
+
return {"el": el, "inner": inner};
- }
+
}
projects / roojs1 / blobdiff