* 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";
}
this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
if(Roo.isIE){
Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
* @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;
this.el.update("");
this.el.remove();
}
+ },
+
+ createStrip : function(container)
+ {
+ var strip = document.createElement("nav");
+ strip.className = Roo.bootstrap.version == 4 ?
+ "navbar-light bg-light" :
+ "navbar navbar-default"; //"x-tabs-wrap";
+ container.appendChild(strip);
+ return strip;
+ },
+
+ createStripList : function(strip)
+ {
+ // div wrapper for retard IE
+ // returns the "tr" element.
+ 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("tab-content");
+ container.appendChild(body);
+ return body;
+ },
+ createItemBody :function(bodyEl, id){
+ var body = Roo.getDom(id);
+ if(!body){
+ body = document.createElement("div");
+ body.id = id;
+ }
+ //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, 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(
+ '<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>' +
+ '<div unselectable="on" class="close-icon"> </div></em></span></a>'
+ );
+ }
+ var el = this.closeTpl.overwrite(td, {"text": text});
+ var close = el.getElementsByTagName("div")[0];
+ var inner = el.getElementsByTagName("em")[0];
+ return {"el": el, "close": close, "inner": inner};
+ } else {
+ */
+ // 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>'
+ )
+ );
+ }
+
+ 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};
+
}
+
+
});