- /*
+/*
* 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
*/
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, {
/*
*@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.
* @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)
+ {
+ //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;
},
}
//Roo.fly(body).addClass("x-tabs-item-body");
Roo.fly(body).addClass("tab-pane");
- bodyEl.insertBefore(body, bodyEl.firstChild);
+ bodyEl.insertBefore(body, bodyEl.firstChild);
return body;
},
/** @private */
- createStripElements : function(stripEl, text, closable)
+ createStripElements : function(stripEl, text, closable, tpl)
{
- var td = document.createElement("div"); // was td..
- stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
- //stripEl.appendChild(td);
+ 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){
} 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>'
+// 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