No that isn't supported. Left/right tabs would be a significant amount of work to get to render properly. It would also take up significantly more screen real estate to stack the tab titles vertically, as opposed to a single row horizontally, unless you resticted the number of characters you were going to display.
No that isn't supported. Left/right tabs would be a significant amount of work to get to render properly. It would also take up significantly more screen real estate to stack the tab titles vertically, as opposed to a single row horizontally, unless you resticted the number of characters you were going to display.
I agree it'd require more horizontal screen real estate to accommodate tabs on the left or right, but the benefit is you can potentially display more tabs vertically than you can horizontally. Additionally, there are certain UI design pattern considerations that vertical tabs would address that I think it's worth investigating. I am interested enough in this sort of functionality (for some of my projects) that I've added it to my own personal list of things to get accomplished in Ext. I don't know how soon I'll find the time, but it's a priority to me.
Jeff Howden
Ext JS - Support Team Volunteer jeff@extjs.com
Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.
Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.
...but the benefit is you can potentially display more tabs vertically than you can horizontally. Additionally, there are certain UI design pattern considerations that vertical tabs would address that I think it's worth investigating. I am interested enough in this sort of functionality (for some of my projects) that I've added it to my own personal list of things to get accomplished in Ext. I don't know how soon I'll find the time, but it's a priority to me.
The point has thus been picked up successfuly. There are many situations which could demand more tabs for which you will have to go vertical rather than staying horizontal. Apart from a genuine necessity, verticle tabs may also be required for designing perspective. I mean for how long you will be using horizontal tabs only?
I've come up with a fix to create left aligned tabs for a basic TabPanel.
The main problem is that the js renders a Table, it should render an Unordered List instead.
Only 2 basic modifiactions were needed to 2 TabPanel functions, highlighted in RED below. This is still a work in progress for me, but the positioning works:
Ext.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
var td = document.createElement("li");
stripEl.appendChild(td);
if(closable){
td.className = "x-tabs-closable";
if(!this.closeTpl){
this.closeTpl = new Ext.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 {
if(!this.tabTpl){
this.tabTpl = new Ext.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>'
);
}
var el = this.tabTpl.overwrite(td, {"text": text});
var inner = el.getElementsByTagName("em")[0];
return {"el": el, "inner": inner};
}
};
Now that it's an Unordered List, it easy to modify the CSS to get the list to render a vertical or horizontal tab panel, and float it wherever you like. I'm still waiting on my company's final UI design requirements, but for now, I've got my tabs aligned left in Firefox with the following CSS modifications. Overwriting the background images, perfecting element widths, and applying styles to the UL and LI should allow complete customization to the tab panel.
Left or Right aligned Tabs
Originally Posted by tryanDLS
Jeff Howden
Reply With Quote
