- /*
+/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
}
if(this.tabPosition == "bottom"){
+ // if tabs are at the bottom = create the body first.
this.bodyEl = Roo.get(this.createBody(this.el.dom));
this.el.addClass("roo-tabs-bottom");
}
- this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
- this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
- this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+ // next create the tabs holders
+
+ if (this.tabPosition == "west"){
+
+ var reg = this.region; // fake it..
+ while (reg) {
+ if (!reg.mgr.parent) {
+ break;
+ }
+ reg = reg.mgr.parent.region;
+ }
+ Roo.log("got nest?");
+ Roo.log(reg);
+ if (reg.mgr.getRegion('west')) {
+ var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
+ this.stripWrap = Roo.get(this.createStrip(ctrdom ), 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);
+
+
+ }
+
+
+ } else {
+
+ 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");
}
+
+ // finally - if tabs are at the top, then create the body last..
if(this.tabPosition != "bottom"){
/** The body element that contains {@link Roo.TabPanelItem} bodies. +
* @type Roo.Element
/*
*@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
*/
- toolbar : false,
+ toolbar : false, // set by caller..
+
+ region : false, /// set by caller
+
+ disableTooltips : true, // not used yet...
/**
* Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
* 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)
+ {
+ //Roo.log('activite:' + 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;
},
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]);
} else {
*/
// not sure what this is..
- if(!this.tabTpl){
+// 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></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(tpl)) {
+ switch (typeof(template)) {
case 'object' :
- this.tabTpl = tpl;
break;
case 'string' :
- this.tabTpl = new Roo.Template(tpl);
+ template = new Roo.Template(template);
break;
default :
break;
}
- var el = this.tabTpl.overwrite(td, {"text": text});
- var inner = false;// el.getElementsByTagName("span")[0];
+ var el = template.overwrite(td, {"text": text});
+
+ var inner = el.getElementsByTagName("span")[0];
+
return {"el": el, "inner": inner};
- //}
+
}
projects / roojs1 / blobdiff