PDA

View Full Version : Vertical tabs for TabPanel



Carina
13 Feb 2008, 8:19 AM
hi,

I couldn't find a thread that described how to make a resizeable TabPanel with vertical tabs in Ext 2.0 so I wrote a small user extension. Please see the attached screenshots for example results. Some documentation and a demo can be found here (http://carina.net/blog/ext-vertical-tabs-extension/).

In order to use this extension, you need to include the js file that contains the code of the extension (of course.. :) ) and also an additional css file. They are both included in the attached zip file.

Usage example:


var tabpanel1 = new Ext.ux.VerticalTabPanel({
activeTab: 0,
tabPosition:'left', //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
textAlign:'right',
renderTo:'tabs',//id of an existing DOM element
width:500,
height:200,
tabWidth:100,
defaults:{autoScroll: true},
items:[{
title: 'By category',
html: "Show content by category... "
},{
title: 'Folder',
html: "Show folder content... "
} ] });

Last update: 04-04-2009 => added some additional bugfixes, screenshots and link to demo

Carina
19 Feb 2008, 6:53 AM
I just received a PM in which someone requested a little help about this one. I thought it's better to post it here for future reference.

The js code in my first post is now updated, some bugs are fixed (before, this only worked in my application which always triggers a resize event after creating the TabPanel) and I added a small example.

rrenfro
19 Feb 2008, 11:40 AM
Hi Carina (http://extjs.com/forum/member.php?u=955),

I just tried out your vertical tab extension with the above example code... The tabs do not render correctly. I have attached a screenshot. Hope it helps.

extjs 2.0.1
Firefox/2.0.0.12 Mac
Firebux does not display any errors

franckxx
19 Feb 2008, 1:28 PM
Incredible....

It's little buggy....but it's real nice idea !!

It can be Very Usefull -------> Impatient to see next release !!

Carina
19 Feb 2008, 2:46 PM
hi,

@rrenfro
that's exactly what the panel looks like when the CSS is missing, maybe you tried the code without adding the CSS? I will update my first post and add a remark that the CSS is absolutely necessary to make this work properly (that's why this extension doesn't need much JS code - the main work is done via CSS).

I'm working with Firefox on Win and Mac myself so at least those two should be a little tested ;)

@franckxx
thanks :)
What other bugs are you referring to for example? (except for the styling - I should remove some unecessary borders.. )

kairinsama
19 Feb 2008, 2:57 PM
This allows the tabs to align the text to the right. Without the 100% on the ul element, it causes the list items to expand to the width of the next parent.

Tested in FF2 and Safari3.


.verticalTabs ul.x-tab-strip { width: 100%; }
.verticalTabs ul.x-tab-strip li {
clear: both;
margin: 0;
text-align: right;
width: 100%;
}

Gemini.H
19 Feb 2008, 10:07 PM
hi,about the bug of triggers a resize event is not fixed,I checked it in IE7,and the tab strip's text is become more small,So I think this bug is not complete fixed.anothe question is why does I can't resize the tab strip?Thank you!

Carina
26 Feb 2008, 3:03 PM
kairinsama,
thanks! I included your css and made it a config option (textAlign 'left' or 'right')

Gemini.H,
what exactly do you mean regarding IE7? When I try the example in IE7, it looks like this (see attachment). What is your setup, how did you use the TabPanel?
You can set the tab width using the tabWidth config option.

hendricd
26 Feb 2008, 4:48 PM
Nice job Carina.

Gemini.H
26 Feb 2008, 7:02 PM
hi carina,

I use the vertical tab following:


var techniqueBatimentItem = new Ext.ux.TabPanel({
verticalTabs:true,
border: false,
activeTab: 0,
autoScroll: false,
resizeTabs: true,
autoWidth: false,
defaults:{autoScroll: true},
tabStripWidth:40,
items: [
{
title:silentsoft.i18n.buildingTechnical.oil,
width:160,
html: '<p class="menuItem" onclick="silentsoft.app.onTankLevelsPressed();">' + silentsoft.i18n.buildingTechnical.tankLevels + '</p><p class="menuItem" onclick="silentsoft.app.onTankContractsPressed();">' + silentsoft.i18n.buildingTechnical.tankContracts + '</p><p class="menuItem" onclick="silentsoft.app.onTankAutonomyPressed();">' + silentsoft.i18n.buildingTechnical.tankAutonomy + '</p><p class="menuItem" onclick="silentsoft.app.onTankInventoryPressed();">' + silentsoft.i18n.buildingTechnical.tankInventory + '</p><p class="menuItem" onclick="silentsoft.app.onTankDetailsPressed();">' + silentsoft.i18n.buildingTechnical.tankDetails + '</p><p class="menuItem" onclick="silentsoft.app.onTankHistoricPressed();">' + silentsoft.i18n.buildingTechnical.tankHistoric + '</p><p class="menuItem" onclick="silentsoft.app.onTankThresholdsPressed();">' + silentsoft.i18n.buildingTechnical.tankThresholds + '</p><p class="menuItem" onclick="silentsoft.app.onTankLowlevelsPressed();">' + silentsoft.i18n.buildingTechnical.tankLowlevels + '</p><p class="menuItem" onclick="silentsoft.app.onTankFillingsPressed();">' + silentsoft.i18n.buildingTechnical.tankFillings + '</p><p class="menuItem" onclick="silentsoft.app.onTankConsumptionPressed();">' + silentsoft.i18n.buildingTechnical.tankConsumption + '</p><p class="menuItem" onclick="silentsoft.app.onTankMonthlyConsumptionPressed();">' + silentsoft.i18n.buildingTechnical.tankMonthlyConsumption + '</p><p class="menuItem" onclick="silentsoft.app.onTankConsumptionTablePressed();">' + silentsoft.i18n.buildingTechnical.tankConsumptionTable + '</p><p class="menuItem" onclick="silentsoft.app.onTankMonthlyCurrentPricePressed();">' + silentsoft.i18n.buildingTechnical.tankCurrentPrice + '</p><p class="menuItem" onclick="silentsoft.app.onTankListOfSuppliersPressed();">' + silentsoft.i18n.buildingTechnical.tankListOfSuppliers + '</p><p class="menuItem" onclick="silentsoft.app.onTankSurveyOfBuyingPricesPressed();">' + silentsoft.i18n.buildingTechnical.tankSurveyOfBuyingPrices + '</p><p class="menuItem" onclick="silentsoft.app.onTankOrderingListPressed();">' + silentsoft.i18n.buildingTechnical.tankOrderingList + '</p><p class="menuItem" onclick="silentsoft.app.onTankOrderingFollowUpPressed();">' + silentsoft.i18n.buildingTechnical.tankOrderingFollowUp + '</p>',
autoScroll: true
},{
title: silentsoft.i18n.buildingTechnical.water,
html: 'wedasd',
//disabled: true,
autoScroll: true
},{
title: silentsoft.i18n.buildingTechnical.element,
html: 'asdad',
//disabled: true,
autoScroll: true
},{
title: silentsoft.i18n.buildingTechnical.light,
html: 'asdasd',
//disabled: true,
autoScroll: true
},{
title: silentsoft.i18n.buildingTechnical.wind,
html: 'adasd',
//disabled: true,
autoScroll: true
}
]
});

and when I pressed the key of f11 on keyboard,the screen will be expand,So the tab strip's text will be diminish(see the attachment),but when first loading the page,It will be ok,I don't know why?if you have some good idea,please tell me,Thank you very much!

amoghadam
6 Aug 2008, 10:08 PM
Dear Team,

I still have the tabs verticle and I have added the CSS to my html file.
please let me know what I'm missing to make this working.

Thank you so very much


Ext.onReady(function(){
var button = Ext.get('show');

var tabtest = new Ext.ux.TabPanel({
verticalTabs:true,
border: false,
activeTab: 0,
autoScroll: true,
defaults:{autoScroll: true},
items:[{
title: 'Tab 1',
html: "My content was added during construction."
},{
title: 'Tab2',
html: "My content was added during construction."
},{
title: 'Disabled Tab',
html: "Can't see me cause I'm disabled"
}]
});


var win = new Ext.Window({
width: 600,
layout: 'fit',
height: 600,
items: tabtest
});
win.show();
});


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/css/Ext_POC.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" src="example.js"></script>
<script language="javascript" src="vertical_tab.js"></script>
</head>
<body>

<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show" value="Hello World" /><br /><br />

</body>
</html>


Ext.namespace("Ext.ux");

/**
* @class Ext.ux.TabPanel
* @extends Ext.TabPanel
*
* Enable tabs to be positioned on the left side of a TabPanel. In order to make as few changes as possible, we reuse
* the header element and place it on the left side
*/

/**
* @constructor
* @param {Object} cfg A config object
* @cfg {String} tabPosition 'top', 'button', 'left' or right
* @cfg {Number} tabWidth (only applies if verticalTabs is set to true)
* @cfg {String} textAlign 'left' or 'right', deafults to 'left' (only applies if verticalTabs is set to true)
*/
Ext.ux.TabPanel = function(cfg) {
if (cfg.tabPosition == 'left' || cfg.tabPosition == 'right') {
cfg.cls = cfg.cls || '';
cfg.cls = 'verticalTabs ' + cfg.cls;
if (cfg.textAlign && cfg.textAlign == 'right') {
cfg.cls = 'alignRight ' + cfg.cls;
}
cfg.cls = (cfg.tabPosition == 'left' ? 'leftTabs ' : 'rightTabs ') + cfg.cls;
this.intendedTabPosition = cfg.tabPosition;
this.verticalTabs = true;
cfg.tabPosition = 'top';
}
Ext.ux.TabPanel.superclass.constructor.call(this, cfg);
};

Ext.extend(Ext.ux.TabPanel, Ext.TabPanel, {
tabWidth : 150,

afterRender : function() {
Ext.ux.TabPanel.superclass.afterRender.call(this);
if (this.verticalTabs) {
this.header.setWidth(this.tabWidth);
this.header.setHeight(this.height || this.container.getHeight());
}
},

/**
* Adjust header and footer size.
* @param {Number} w width of the container
* @return {Number} the body will be resized to this width
*/
adjustBodyWidth : function(w) {
if (this.verticalTabs) {
if (Ext.isIE6) {
//I got the value "3" through trial and error; it seems to be related with the x-panel-header border; if the border
//is set to "none", then this substraction is not necessary - but it does not seem related to the border width, margin or padding of any
//of the panels so I dont know how to calculate it; please let me know if you have any idea what's going on here
this.bwrap.setWidth(w - 3);
}
return w;
}
else {
return Ext.ux.TabPanel.superclass.adjustBodyWidth.call(this, w);
}
},

/**
* Get the new body height and adjust the height of the tab strip if it is vertical.
* @param h {Number}
*/
adjustBodyHeight : function(h) {
if (this.verticalTabs) {
this.header.setHeight(h + (this.tbar ? this.tbar.getHeight() : 0));
}
return Ext.ux.TabPanel.superclass.adjustBodyHeight.call(this, h);
},

/**
* If the tab strip is vertical, we need to substract the "header" width.
* @return {Number} The frame width
*/
getFrameWidth : function() {
return Ext.ux.TabPanel.superclass.getFrameWidth.call(this) + this.verticalTabs ? this.tabWidth : 0;
},

/**
* If the tab strip is vertical, we don't need to substract it's height
* @return {Number} The frame height
*/
getFrameHeight : function() {
return Ext.ux.TabPanel.superclass.getFrameHeight.call(this) - (this.verticalTabs ? this.header.getHeight() : 0);
}
});


.verticalTabs ul.x-tab-strip li{
clear:both;
margin:0;
width:100%;
}

.verticalTabs .x-tab-strip a.x-tab-strip-close{
display:none;
}

.verticalTabs ul.x-tab-strip li .x-tab-strip-inner {
padding:6px 3px;
}

.verticalTabs .x-tab-left, .verticalTabs .x-tab-strip .x-tab-with-icon .x-tab-right, .verticalTabs .x-tab-strip-top .x-tab-right{
background:none;
padding:0;
}

.verticalTabs ul.x-tab-strip-top{
background:none;
border:none;
padding-top:0;
}

.verticalTabs ul.x-tab-strip li.x-tab-edge{
border-bottom:1px solid #99BBE8!important;
}

.verticalTabs.leftTabs .x-tab-panel-header{
float:left;
}

.verticalTabs.rightTabs .x-tab-panel-header{
float:right;
}

.verticalTabs.alignRight ul.x-tab-strip {
width: 100%;
}

.verticalTabs.alignRight ul.x-tab-strip li {
clear: both;
margin: 0;
text-align: right;
width: 100%;

Carina
6 Aug 2008, 10:26 PM
hi,

I will have a look at this, hopefully this evening. Which version of Ext do you use? This was done for 2.0.1 and I haven't tested it yet with 2.1 or 2.2, so maybe that's the problem...

amoghadam
6 Aug 2008, 10:42 PM
First of all, thank you for getting back at me so quickly.
Secondly I got the issue solved. Please mention that developers have to add tabPosition inside the config for the TabPanel.

Thank you. This is what I was looking for.

Carina
6 Aug 2008, 10:49 PM
I'm glad that you could solve your problem so quickly :-)

Sorry about your problems. There actually is some documentation for the parameters in the code but I will also add a comment in the example code, that's a good idea, thanks!

mdissel
28 Aug 2008, 4:11 AM
Nice extension!!

Anyone tried to make the active tab white? so that it nicely fits with the right panel..

see screenshot.

mdissel
28 Aug 2008, 5:48 AM
Wasn't that hard.. here's the extra css ( copied from this thread http://extjs.com/forum/showthread.php?t=28028) and extra tabs-sprite-white.gif)



.verticalTabs .x-tab-strip-top .x-tab-strip-active .x-tab-right
{
background: transparent url(../icons/ext/tabs-sprite-white.gif) no-repeat 0 -51px;
}
.verticalTabs .x-tab-strip-top .x-tab-strip-active .x-tab-left
{
background: transparent url(../icons/ext/tabs-sprite-white.gif) no-repeat right -351px;
}
.verticalTabs .x-tab-strip-top .x-tab-strip-active .x-tab-strip-inner
{
background: transparent url(../icons/ext/tabs-sprite-white.gif) repeat-x 0 -201px;
}

peacock
23 Sep 2008, 9:19 AM
tabStripWidth -> tabWidth

peacock
27 Sep 2008, 5:54 AM
Ext.TabPanel's id='tab_id'
Ext.ux.TabPanel's id='ux.tab_id'


alert(Ext.getCmp('ux.tab_id')); // [object Object]
alert(Ext.getCmp('ux.tab_id').getActiveTab()); //TypeError: Ext.getCmp('ux.tab_id').getActiveTab is not a function
alert(Ext.getCmp('tab_id').getActiveTab()); //it's worked

temporary
19 Jan 2009, 2:15 PM
Very nice! Got it works fine with 2.2 here.

kenton
20 Jan 2009, 8:13 PM
I like the extension a lot, but I have a question for you:

Here is how I am using the extension:


var tabtest = new Ext.ux.TabPanel({
activeTab: 0,
tabPosition:'left', //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
textAlign:'left',
id:'tab_panel',
autoDestroy:'false',
tabStripWidth:200,
defaults:{autoScroll: true},
items:[{
title: 'Tab 1',
html: "My content was added during construction."
},{
title: 'Tab2',
html: "Content 2."
},{
title: 'Disabled Tab',
disabled:true,
html: "Can't see me cause I'm disabled"
}
]
});

var tab_win = new Ext.Window({
width:800,
layout:'fit',
id:'tab_window',
height:600,
items:[tabtest]
});

tab_win.show();
});

function add_channel()
{
alert("add channel called!");

var tabPanel = Ext.getCmp('tabtest');
tabPanel.add
({
title:'New Channel',
html: 'new channel',
border:false,
autoScroll:true,
iconCls:'settings'
}).show();
}

When I call the add_channel() I get a tabPanel is undefined. Any thoughts?

Carina
20 Jan 2009, 11:00 PM
hi,

good to hear that this works for you! I have to admit that I simply coded and never used it (changed my plans....) so chances are that there are some bugs left.

@kenton:
I guess that's because Ext.getCmp needs the correct ID of the component. "tabtest" is the name of your local variable that isn't accessible anymore in the scope of your add_channel function (if it was, then you wouldn't need to call getCmp and could access the variable directly).
I usually don't use IDs for my components (because if you change them you might end up having trouble and if you use duplicate IDs, you have problems too...) and rather keep a reference to the tabpanel (this.tabtest=new Ext.ux.TabPanel()).





var tabtest = new Ext.ux.TabPanel({
id:'tab_panel',
....
});

...
var tabPanel = Ext.getCmp('tab_panel'); //instead of "tabtest"

kenton
21 Jan 2009, 3:04 PM
fixed the problem thanks!

suzie
1 Apr 2009, 8:13 AM
Hello,

Thanx for this extension, it is very usefull.

I found a great Vertical tabPanel on the qooxdoo Framework (http://demo.qooxdoo.org/current/demobrowser/#widget~TabView.html).

See screeshot attached...

Do you know how it could be made with Ext Js stylesheets ?

mjlecomte
1 Apr 2009, 10:27 AM
Ext 3 has some examples of this.

Carina
2 Apr 2009, 12:17 AM
Do you mean if you can style the vertical tab panel to look like the qooxdoo example? Sounds possible to me (at least if you are not totally unexperienced when it comes to CSS). Unfortunately, I currently don't have the time to look at it and I don't have a running example of the vertical tabs to test it but I think it should work. Maybe I have time to look at it on the weekend but I can't promise it..

I would try to set an iconCls for each tab to add the icons. Then I would replace the background sprite with a new one. You also have to note that in my example I don't use the dom elements that are responsible for the right and left corners of the tab. To get the rounded corners, you will have to use them:

.verticalTabs .x-tab-left, .verticalTabs .x-tab-strip .x-tab-with-icon .x-tab-right, .verticalTabs .x-tab-strip-top .x-tab-right{
background:none;
padding:0;
}

devin
9 Apr 2009, 11:32 PM
hello carina,
Thanks for your Extensions ,It's very important to me.
But I have a trouble .I find this Extensions has questions run on IE 7.0 ,but nice on IE 6.0 and firefox.

this is my codes and attachment.help me please ,Thank you!


Ext.onReady(function() {
/////////////////////////////////////////////////////////////////////////////////////////
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

////////////////////////////////////////////////////////////////////////////////////////
// Grid 1
////////////////////////////////////////////////////////////////////////////////////////
var grid1 = new Ext.grid.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{id:'company',header: "Company", width: 40, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 20, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]),
viewConfig: {
forceFit:true
},
title:'Grid with Numbered Rows and Force Fit',
bbar:[{text:'xxxxxxxxx'},{text:'yyyyyyyy'}]
});
/////////////////////////////////////////////////////////////////////////////////////////
var tabtest = new Ext.ux.TabPanel({
verticalTabs:true,
activeTab: 0,
tabPosition:'left', //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
textAlign:'left',
tabStripWidth:200,
defaults:{autoScroll: true},
//renderTo:document.body,
items:[{
title: 'Tab 1',
html: 'Tab1........'
},{
title: 'Tab2',
layout:'fit',
items:[grid1]
//html: 'Tab2.......'
},{
title: 'Tab3',
html: 'Can not see me cause I am disabled'
} ]
});
var view = new Ext.Viewport({
//width:800,
layout:'fit',
//height:500,
items:[tabtest]
});
});
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

devin
20 Apr 2009, 10:17 PM
Wht there nobody to help me!
======================
if I set tab on the left side, And I find on the right of this Vertical TabPanel, I can't use Ext.TabPanel.

this is my code:


var grid1 = ...
var grid2 = ...
var tabs2 = new Ext.TabPanel({
tabPosition : 'top',
height : 300,
activeTab : 0,
frame : true,
defaults : {
autoHeight : true
},
items : [grid1, grid2]
});
var tabs = new Ext.ux.VerTabPanel({
verticalTabs : true,
activeTab : 0,
tabPosition : 'left' // choose 'left' or 'right' for vertical tabs; 'top'
// or 'bottom' for horizontal tabs
,
textAlign : 'left',
tabStripWidth : 200,
defaults : {
autoScroll : true
},
tabWidth : 120,
height : 470,
layoutOnTabChange : true,
items : [{
title : 'xxxxxxx',
layout : 'fit',
items : tabs1
}, {
title : 'yyyyyyy',
layout : 'fit',
items : tabs2
}]
});

Carina
20 Apr 2009, 11:08 PM
Sorry, I didn't see your first post. I will try to have a look at it. I'm currently pretty busy but I'll try to find some time this week.

devin
21 Apr 2009, 10:33 PM
Sorry, I didn't see your first post. I will try to have a look at it. I'm currently pretty busy but I'll try to find some time this week.

Thank you very much !
I had try my best to find a solution !
I find there is a Ext.ux.groupPanel in the Ext3.0,and I can't use it,because it do not support Ext2.2.1.

devin
25 Apr 2009, 8:53 PM
hi Carina,

thanks for you post.

I get the answer for my question! the pivotal point on the CSS.

this is my code,add this in my jsp page:


<style type="text/css">
.verticalTabs ul.x-tab-strip li{
clear:both;
margin:0;
width:100%;
}
.verticalTabs .x-panel-body ul.x-tab-strip li{
clear:none;
float:left;
margin-left:2px;
margin:none;
width:auto;
}
.verticalTabs .x-panel-body ul.x-tab-strip li .x-tab-strip-inner {
padding:0;
}
</style>

Carina
26 Apr 2009, 6:09 AM
Good to hear that it works fine for you now! :)

Since I didn't read your post until now, I made some updates to the code anyway, added some bugfixes and put some documentation and a demo online. In case this is still relevant for you, here is the link (http://carina.net/blog/ext-vertical-tabs-extension/).

Kind regards,
Carina

vivitron
28 Apr 2009, 8:00 PM
I think this is a great extension. I had an issue using TabPanels inside the vertical TabPanel because the css styles would apply themselves to both TabPanels.

I've modified the CSS to use child selectors and be less aggressive. I did not do extensive testing, but thought I'd post it out here for everyone.

Of course, this will not work with IE6.



.ux-vertical-tabs{
border:1px solid #8DB2E3;
}

.x-window .ux-vertical-tabs{
border:none;
}

.ux-vertical-tabs-left > .x-tab-panel-header {
float: left;
}

.ux-vertical-tabs-right > .x-tab-panel-header {
float: right;
}

.ux-vertical-tabs-alignright > div > .x-tab-strip .x-tab-with-icon span.x-tab-strip-text{
padding-right:20px;
padding-left:0;
background-position:right 3px;
}

.ux-vertical-tabs, .ux-vertical-tabs > .x-tab-panel-bwrap, .ux-vertical-tabs > div > .x-tab-panel-body{
height:100%;
}

.ux-vertical-tabs > ul.x-tab-strip > li {
border-bottom:1px solid #8DB2E3;
margin: 0;
width: 100%;
}

.ux-vertical-tabs > div .x-tab-strip a.x-tab-strip-close,
.ux-vertical-tabs > div .x-tab-edge{
display: none;
}

.ux-vertical-tabs > div > div > ul.x-tab-strip li .x-tab-strip-inner {
padding: 6px 3px;
}

.ux-vertical-tabs > div > div > ul > li > a > .x-tab-left, .ux-vertical-tabs > div > div > .x-tab-strip .x-tab-with-icon .x-tab-right, .ux-vertical-tabs > div > div > .x-tab-strip-top .x-tab-right {
background: none;
padding: 0;
}

.ux-vertical-tabs > div > div > ul.x-tab-strip-top {
background: none;
border: none;
padding-top: 0;
}

.ux-vertical-tabs > .x-tab-panel-header {
border:0 none transparent;
}


.ux-vertical-tabs-alignright > div > div > ul.x-tab-strip {
width: 100%;
}

.ux-vertical-tabs-alignright > div > div > ul.x-tab-strip li {
clear: both;
margin: 0;
text-align: right;
width: 100%;
}

.ux-vertical-tabs > div > .x-tab-panel-body{
padding:5px;
border:0;
}

.ux-vertical-tabs-left > .x-tab-panel-bwrap{
border-left:1px solid #8DB2E3;
}

.ux-vertical-tabs-right > .x-tab-panel-bwrap{
border-right:1px solid #8DB2E3;
}

.ux-vertical-tabs > div > div > .x-tab-strip-top .x-tab-strip-inner {
background-position:0 -202px;
}

.ux-vertical-tabs > div ul.x-tab-strip-top{
border-bottom:1px solid #fff;
}

.ux-vertical-tabs > div .x-tab-strip-top .x-tab-strip-active .x-tab-right {
margin-bottom:0;
}

.ext-ie6 .ux-vertical-tabs .x-tab-panel-bwrap{
position:absolute;
}

samadhi
5 May 2009, 1:52 AM
Thank you.

Any chance to make it working under IE8 ?
It do not dispalay left tabs at all.

vivitron
5 May 2009, 3:38 AM
I have no trouble in IE8 ... with and without compatibility mode.

samadhi
5 May 2009, 5:18 AM
Yeah, i see now, demo is working.
Something wrong with my code probably, because it works only in compatibilty mode..

kenton
6 Jun 2009, 5:25 PM
any chance that you are going to add tab scrolling functionality?

taberg
22 Jun 2009, 1:31 PM
Thanks for a great addon!

I use the vertical tabs inside the horizontal tabs.

Firefox displays it correctly, but in IE the "content" part of the vertical tabs have no border.

Anyone have any suggestions?

page:

www.beandonesia.com then klick tab named "Kaffet".

regards Tomas

Scorpie
23 Jun 2009, 1:22 AM
Nice stuff! Is it 3.x compliant?

koko2589
24 Jun 2009, 11:57 AM
tankou it work very good i use it here

http://itoto1.com/index333.html

:))=D>

sarvsingh@quark.com
26 Jun 2009, 3:01 AM
This is a wonderful implementation. A very fine work..

I would like to know if I can have Vertical Tabs at the bottom as well.. To elaborate, using the extension, I can have vertical tabs either on the left/right of the panel. And for top & bottom tab positions, the tabs are horizontally aligned. Is it possible to align the tabs vertically at bottom (tabposition) position? I am sure there is ;)
A lot of thanks for the extension & thanks in advance..

charleshimmer
27 Jul 2009, 1:56 PM
@Carina, great extension. Thanks, was perfect for what I needed.

@sarvsingh - What do you mean vertical tabs on the bottom? On the bottom would have to be horizontal.

thenewmexican
3 Aug 2009, 8:57 AM
Hi Carina.
Excellent implementation of VerticalTabPanel.

However. It doesn't scroll as expected when the number of items exceed the viewable space of the VerticalTabPanel.

The Browser is FF: 3.0.5
ExtJS version is 3.0

Thanks.

Jochen
3 Sep 2009, 3:22 AM
The Vertical tabs are really cool and working fine, thanx for the work!

I found a problem with IE8 (winxp):


Working fine when first loading
press f5 or click reload: the tabs content is empty (panels are below the tabpanel)
click in the address bar and press return - everything works fine again:)

Same behaviour with javascript:


"document.location.reload();" => same as f5/reload click
"document.location.href=document.location.href;" (yes really!!) works fine


Does anyone have an idea whats happening and how I can fix it???



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<base href="http://localhost/ws/erecruitee/modules/backend/" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="res/ext-extend/ux_VerticalTabPanel.js"></script>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="res/ext-extend/ux_VerticalTabPanel.css" />

<script type="text/javascript">
Ext.onReady(function (){
var panels = new Ext.ux.VerticalTabPanel({
id : "tabs",
tabPosition : "left",
region : "center",
items : [
new Ext.Panel({title: "tab1",html: "tab1 content"}),
new Ext.Panel({title: "tab2",html: "tab2 content"}),
new Ext.Panel({title: "tab3",html: "tab3 content"})
],

bodyStyle : "margin:0;padding:0;border:0;",
border : false,
bodyBorder : false,
hideBorders : true

});

var header = new Ext.Toolbar({
region : "north",
height : "40",
html : "header"
});

var viewport = new Ext.Viewport({
border : 0,
layout : "border",
items : [header, panels]
});
panels.doLayout();
viewport.doLayout();
}
);
</script>
</head>
<body></body>
</html>

Jochen
3 Sep 2009, 4:09 AM
Ok, already found the problem: An weird Add-On caused this problem!!
It was still there from the previous IE7 installation, deactivating helped:)
So, the vertical tabs are working well w/ie8.

rballman
22 Oct 2009, 10:56 PM
are these tabs not closable?

Jochen
26 Oct 2009, 12:29 AM
They are closeable if you modify css in ux_VerticalTabPanel.css

(1) .ux-vertical-tabs .x-tab-strip a.x-tab-strip-close is defined as display:none thus you cannot see the close icon

(2) specify left property for .ux-vertical-tabs .x-tab-strip .x-tab-strip-closable a.x-tab-strip-close

alkon
14 Nov 2009, 12:56 PM
Hello

I've modified this extension and added the scrolling of the tabs. May be it will be interesting for someone.
New functionality has been tested for
Ext 2.2.1
Browser: FF 3.5.4, IE8, Safari 3.2.1, Chrome 3.0

Here is modified extension and the example:
17203

kosal
23 Nov 2009, 4:19 AM
hey alkon.........this is kosal.......in this vertical tabs example ..its working fine.....bt i m putting images instead of text title in the tabs.........so i m getting strips in the tabs .....how to remove that...plz giv me ans.......i wil be extremly helpful.....

alkon
23 Nov 2009, 10:48 AM
hey alkon.........this is kosal.......in this vertical tabs example ..its working fine.....bt i m putting images instead of text title in the tabs.........so i m getting strips in the tabs .....how to remove that...plz giv me ans.......i wil be extremly helpful.....

Hello kosta
I think it's necessary to play with CSS for tabs. I'm not the expert at css so try to turn it youself.

kosal
23 Nov 2009, 8:06 PM
thanks.....alkon.........:(

wupeng
25 Nov 2009, 4:47 AM
Hello everyone ,
I want to know that how make tabwidth fit to the title in Tabpanel.
For example ,the first title has 5 words,then the tabWidth is 80.And the second title has 7 words ,the tabWidth is 100.
How can I do?
Wish you help me!

kosal
25 Nov 2009, 8:27 PM
i can suggest u one idea......u change d css classes and u can do that.....

kosal
25 Nov 2009, 8:29 PM
hey....alkon..i hav done it.......i hav to do with css classes.........thanks..........

bdcarter
7 Jan 2010, 9:51 AM
I originally read this post to come up with a solution for navigation similar to the GroupTabPanel in ExtJS 2.2.

I ended up not being able to use this method talked about in this post.
I did however write my own extension (first one so don't hate) to act like GroupTabPanel and work in both Ext.2.2+.

I have already detailed my work on my blog so I will not repeat the details.

If you are interested in my solution it can be found at

here (http://carters-site.net/wordpress/2010/01/extjs-2-navigation-plugin-for-creating-simple-site-navigation/)

whisper
7 Jan 2010, 3:19 PM
Nice extension, but like some others I had problems with missing tabs under IE8. I found them when adding a LEFT:200px to the ".ext-ie .ux-vertical-tabs .x-tab-panel-bwrap" entry in the css. If I then made the position relative instead of absolute it would wrap the panel to below the tabs, so something was too wide I suspected since I also noticed that the right border was also missing.

What I did to solve my problem was to:
1) remove that .ext-ie entry altogether, and
2) add in the missing "-3" in the js for adjustBodyWidth that Corina eluded to. So the line now reads: this.bwrap.setWidth(w-3);

Now my tabs render the same in both Firefox and IE8.

Hope this saves others if they run into the same issue.

Eric

tdmitch
9 Jan 2010, 12:13 PM
I need to get some code that will work in EXT JS 3.1 that can have the tabs vertical on the right side.

Can anyone help?





Hi Carina.
Excellent implementation of VerticalTabPanel.

However. It doesn't scroll as expected when the number of items exceed the viewable space of the VerticalTabPanel.

The Browser is FF: 3.0.5
ExtJS version is 3.0

Thanks.

bdcarter
21 Jan 2010, 1:22 PM
I need to get some code that will work in EXT JS 3.1 that can have the tabs vertical on the right side.

Can anyone help?

Did you check my post #54? It supports having the vertical on the right side.

mdissel
4 Feb 2010, 8:07 AM
Anyone already fixed the issue when nesting a tabpanel like this:

tabPanel tabPosition:right
... on a tab i create another tabpanel with tabPosition: top.

currently css from .verticalTabs are inherited down to the tabpanel with tabposition top.. resulting in incorrect rendering.

ps. the css from post #34 doesn't seem to work..

Thanks
Marco

syler2000
1 Mar 2010, 3:38 AM
@mdissel (http://www.extjs.com/forum/member.php?u=353), the problem of other nested tabpanels's layout being messed up by the vert css can be solved with minor additions to the .js file (a pure css solution is not possible as css does not allow depth counting - only index within the same level, and the > (immediate child) cannot help us). Here's what I did (still a WIP)
1) Assigned new CSS class to the shared components btn vertical & normal tabs i.e. .x-vtab-panel-header instead of .x-tab-panel-header (common) in the .css file as below:

CSS fragment (all troublesome have to be changed l8r):

.ux-vertical-tabs{
border:1px solid #8DB2E3;
}

.x-window .ux-vertical-tabs{
border:none;
}

.ux-vertical-tabs-left .x-vtab-panel-header {
float: left;
}

.ux-vertical-tabs-right .x-vtab-panel-header {
float: right;
}

.ux-vertical-tabs-alignright .x-tab-strip .x-tab-with-icon span.x-tab-strip-text{
padding-right:20px;
padding-left:0;
background-position:right 3px;
}

.ux-vertical-tabs, .ux-vertical-tabs .x-tab-panel-bwrap, .ux-vertical-tabs .x-tab-panel-body{
height:100%;
}

.ux-vertical-tabs ul.x-tab-strip li {
border-bottom:1px solid #8DB2E3;
margin: 0;
width: 100%;
}

.ux-vertical-tabs .x-tab-strip a.x-tab-strip-close,
.ux-vertical-tabs .x-tab-edge{
display: none;
}

.ux-vertical-tabs ul.x-tab-strip li .x-tab-strip-inner {
padding: 6px 3px;
}

.ux-vertical-tabs .x-tab-left, .ux-vertical-tabs .x-tab-strip .x-tab-with-icon .x-tab-right, .ux-vertical-tabs .x-tab-strip-top .x-tab-right {
background: none;
padding: 0;
}

.ux-vertical-tabs ul.x-tab-strip-top {
background: none;
border: none;
padding-top: 0;
}

.ux-vertical-tabs .x-vtab-panel-header {
border:0 none transparent;
}


.ux-vertical-tabs-alignright ul.x-tab-strip {
width: 100%;
}

.ux-vertical-tabs-alignright ul.x-tab-strip li {
clear: both;
margin: 0;
text-align: right;
width: 100%;
}

.ux-vertical-tabs .x-tab-panel-body{
padding:5px;
border:0;
}

.ux-vertical-tabs-left .x-tab-panel-bwrap{
border-left:1px solid #8DB2E3;
}

.ux-vertical-tabs-right .x-tab-panel-bwrap{
border-right:1px solid #8DB2E3;
}

.ux-vertical-tabs .x-tab-strip-top .x-tab-strip-inner {
background-position:0 -202px;
}

.ux-vertical-tabs ul.x-tab-strip-top{
border-bottom:1px solid #fff;
}

.ux-vertical-tabs .x-tab-strip-top .x-tab-strip-active .x-tab-right {
margin-bottom:0;
}

.ext-ie6 .ux-vertical-tabs .x-tab-panel-bwrap{
position:absolute;
}


2) Then, most importantly, I modified the .js file to be adding the new class to all panel -header(s), this is just a simple one-liner in afterRender():
this.header.addClass('x-vtab-panel-header');

the full .js is:

Ext.ns("Ext.ux");

/**
* @class Ext.ux.VerticalTabPanel
* @extends Ext.TabPanel
* @author <a href="mailto:me@carina.net">Carina Stumpf</a>
* @version 0.2
*
* An extension for Ext.TabPanel that enables tabs to be positioned on the left or right side of a TabPanel.
*/


/**
* @constructor
* @param {Object} cfg A config object
* @cfg {String} tabPosition 'top' (the ext default behaviour), 'bottom' (also ext default), 'left' (vertical tabs on the left side) or right (vertical tabs on the right side)
* @cfg {Number} tabWidth (only applies if tabPosition is set to 'left' or 'right') the width of the tab strip in pixel; defaults to 150
* @cfg {String} textAlign 'left' or 'right', defaults to 'left' (only applies if tabPosition is set to 'left' or 'right')
*/
Ext.ux.VerticalTabPanel = function(cfg) {
if (cfg.tabPosition == 'left' || cfg.tabPosition == 'right') {
cfg.cls = cfg.cls || '';
cfg.cls = 'ux-vertical-tabs ' + cfg.cls;
if (cfg.textAlign && cfg.textAlign == 'right') {
cfg.cls = 'ux-vertical-tabs-alignright ' + cfg.cls;
}
cfg.cls = (cfg.tabPosition == 'left' ? 'ux-vertical-tabs-left ' : 'ux-vertical-tabs-right ') + cfg.cls;
this.intendedTabPosition = cfg.tabPosition;
this.verticalTabs = true;
cfg.tabPosition = 'top';
}

Ext.ux.VerticalTabPanel.superclass.constructor.call(this, cfg);
};



Ext.extend(Ext.ux.VerticalTabPanel, Ext.TabPanel, {
tabWidth : 150,


afterRender : function() {
Ext.ux.VerticalTabPanel.superclass.afterRender.call(this);
if (this.verticalTabs) {
this.header.setWidth(this.tabWidth);
this.header.setHeight(this.height || this.container.getHeight());
this.header.addClass('x-vtab-panel-header');
}
},


/**
* Adjust header and footer size.
* @param {Number} w width of the container
* @return {Number} the body will be resized to this width
*/

adjustBodyWidth : function(w) {
if (this.verticalTabs) {
if (Ext.isIE6) {
//I got the value "3" through trial and error; it seems to be related with the x-panel-header border; if the border
//is set to "none", then this substraction is not necessary - but it does not seem related to the border width, margin or padding of any
//of the panels so I dont know how to calculate it; please let me know if you have any idea what's going on here
this.bwrap.setWidth(w );
}
return w;
}
else {
return Ext.ux.VerticalTabPanel.superclass.adjustBodyWidth.call(this, w);
}
},

/**
* Get the new body height and adjust the height of the tab strip if it is vertical.
* @param h {Number}
*/
adjustBodyHeight : function(h) {
if (this.verticalTabs) {
this.header.setHeight(h + (this.tbar ? this.tbar.getHeight() : 0));
}
return Ext.ux.VerticalTabPanel.superclass.adjustBodyHeight.call(this, h);
},

/**
* If the tab strip is vertical, we need to substract the "header" width.
* @return {Number} The frame width
*/
getFrameWidth : function() {
return Ext.ux.VerticalTabPanel.superclass.getFrameWidth.call(this) + this.verticalTabs ? this.tabWidth : 0;
},

/**
* If the tab strip is vertical, we don't need to substract it's height
* @return {Number} The frame height
*/
getFrameHeight : function() {
return Ext.ux.VerticalTabPanel.superclass.getFrameHeight.call(this) - (this.verticalTabs ? this.header.getHeight() : 0);
}
});


Give me a few hours and I'l modify the whole extension so as to be non-obtrusive,n I'll post the final one here

e

mdissel
2 Mar 2010, 11:39 PM
Thanks!

syler2000
19 Mar 2010, 3:45 AM
Thanks!
Sorry for taking this long to respond, been busy wth my degree work. Here's my unobtrusive .js and .css, and hopefully soon I'll create the css for clearly defining the the tab boundaries as well as the active tab's attachment to the main body, and later on modify the tab close plugins and tab scrolling

.js (modified)


Ext.ns("Ext.ux");

/**
* @class Ext.ux.VerticalTabPanel
* @extends Ext.TabPanel
* @author <a href="mailto:me@carina.net">Carina Stumpf</a>
* @version 0.2
*
* An extension for Ext.TabPanel that enables tabs to be positioned on the left or right side of a TabPanel.
*/


/**
* @constructor
* @param {Object} cfg A config object
* @cfg {String} tabPosition 'top' (the ext default behaviour), 'bottom' (also ext default), 'left' (vertical tabs on the left side) or right (vertical tabs on the right side)
* @cfg {Number} tabWidth (only applies if tabPosition is set to 'left' or 'right') the width of the tab strip in pixel; defaults to 150
* @cfg {String} textAlign 'left' or 'right', defaults to 'left' (only applies if tabPosition is set to 'left' or 'right')
*/
Ext.ux.VerticalTabPanel = function(cfg) {
if (cfg.tabPosition == 'left' || cfg.tabPosition == 'right') {
cfg.cls = cfg.cls || '';
cfg.cls = 'ux-vertical-tabs ' + cfg.cls; //very important to avoid messin wth nested tabpanels
if (cfg.textAlign && cfg.textAlign == 'right') {
cfg.cls = 'ux-vertical-tabs-alignright ' + cfg.cls;
}
//My other additions to solve the nesting problem
cfg.cls = (cfg.tabPosition == 'left' ? 'ux-vertical-tabs-left ' : 'ux-vertical-tabs-right ') + cfg.cls;
this.intendedTabPosition = cfg.tabPosition;
this.verticalTabs = true;
cfg.tabPosition = 'top';
}

Ext.ux.VerticalTabPanel.superclass.constructor.call(this, cfg);
};



Ext.extend(Ext.ux.VerticalTabPanel, Ext.TabPanel, {
tabWidth : 150,


afterRender : function() {
Ext.ux.VerticalTabPanel.superclass.afterRender.call(this);
if (this.verticalTabs) {
this.header.setWidth(this.tabWidth);
this.header.setHeight(this.height || this.container.getHeight());
this.header.addClass('x-vtab-panel-header');
}

Ext.fly(Ext.DomQuery.selectNode("ul:first",this.header.dom.children)).addClass("x-vtab-panel-header-ul");
//console.log(Ext.DomQuery.selectNode("ul:first",this.header.dom.children)); //firebug :)
},


/**
* Adjust header and footer size.
* @param {Number} w width of the container
* @return {Number} the body will be resized to this width
*/

adjustBodyWidth : function(w) {
if (this.verticalTabs) {
if (Ext.isIE6) {
//I got the value "3" through trial and error; it seems to be related with the x-panel-header border; if the border
//is set to "none", then this substraction is not necessary - but it does not seem related to the border width, margin or padding of any
//of the panels so I dont know how to calculate it; please let me know if you have any idea what's going on here
this.bwrap.setWidth(w );
}
return w;
}
else {
return Ext.ux.VerticalTabPanel.superclass.adjustBodyWidth.call(this, w);
}
},

/**
* Get the new body height and adjust the height of the tab strip if it is vertical.
* @param h {Number}
*/
adjustBodyHeight : function(h) {
if (this.verticalTabs) {
this.header.setHeight(h + (this.tbar ? this.tbar.getHeight() : 0));
}
return Ext.ux.VerticalTabPanel.superclass.adjustBodyHeight.call(this, h);
},

/**
* If the tab strip is vertical, we need to substract the "header" width.
* @return {Number} The frame width
*/
getFrameWidth : function() {
return Ext.ux.VerticalTabPanel.superclass.getFrameWidth.call(this) + this.verticalTabs ? this.tabWidth : 0;
},

/**
* If the tab strip is vertical, we don't need to substract it's height
* @return {Number} The frame height
*/
getFrameHeight : function() {
return Ext.ux.VerticalTabPanel.superclass.getFrameHeight.call(this) - (this.verticalTabs ? this.header.getHeight() : 0);
}
});



.css (modified)


.ux-vertical-tabs{
border:1px solid #8DB2E3;
}

.x-window .ux-vertical-tabs{
border:none;
}

.ux-vertical-tabs-left .x-vtab-panel-header {
float: left;
}

.ux-vertical-tabs-right .x-vtab-panel-header {
float: right;
}

.ux-vertical-tabs-alignright ul.x-vtab-panel-header-ul/*x-tab-strip*/ > li.x-tab-with-icon span.x-tab-strip-text{
padding-right:20px;
padding-left:0;
background-position:right 3px;
}

.ux-vertical-tabs, .ux-vertical-tabs .x-tab-panel-bwrap, .ux-vertical-tabs .x-tab-panel-body{
height:100%;
}

/*.ux-vertical-tabs ul.x-tab-strip*/.x-vtab-panel-header-ul > li {
border-bottom:1px solid #8DB2E3;
margin: 0;
width: 100%;
}

.ux-vertical-tabs .x-tab-strip a.x-tab-strip-close,
.ux-vertical-tabs .x-tab-edge{
display: none;
}

.ux-vertical-tabs ul.x-vtab-panel-header-ul > /*x-tab-strip*/ li .x-tab-strip-inner {
padding: 6px 3px;
}

.ux-vertical-tabs .x-tab-left, .ux-vertical-tabs .x-tab-strip .x-tab-with-icon .x-tab-right, .ux-vertical-tabs .x-tab-strip-top .x-tab-right {
/*background: none;*/
padding: 0;
}

.ux-vertical-tabs ul.x-vtab-panel-header-ul/*x-tab-strip-top*/ {
background: none;
border: none;
padding-top: 0;
}

.ux-vertical-tabs .x-vtab-panel-header {
border:0 none transparent;
}


.ux-vertical-tabs-alignright ul.x-vtab-panel-header-ul/*x-tab-strip*/ {
width: 100%;
}

/*.ux-vertical-tabs-alignright ul.x-tab-strip*/.x-vtab-panel-header-ul > li {
clear: both;
margin: 0;
text-align: right;
width: 100%;
}

.ux-vertical-tabs .x-tab-panel-body{
/*padding:5px;*/
border:0;
}

.ux-vertical-tabs-left .x-tab-panel-bwrap{
border-left:1px solid #8DB2E3;
}

.ux-vertical-tabs-right .x-tab-panel-bwrap{
border-right:1px solid #8DB2E3;
}

.ux-vertical-tabs ul.x-vtab-panel-header-ul/*x-tab-strip-top*/ > .x-tab-strip-inner {
background-position:0 -202px;
}

.ux-vertical-tabs ul.x-vtab-panel-header-ul/*x-tab-strip-top*/{
border-bottom:1px solid #fff;
}

.ux-vertical-tabs .x-vtab-panel-header-ul/*x-tab-strip-top*/ > .x-tab-strip-active .x-tab-right {
margin-bottom:0;
}

.ext-ie6 .ux-vertical-tabs .x-tab-panel-bwrap{
position:absolute;
}



you can remove the console.log firebug thingies as I was using them to debug the code (NOTE: wont work if u retain the console.log lines when you dont have firebug active) ....or lemme just comment them out!!

tot2ivn
2 Apr 2010, 11:03 PM
You guys can check out my simple ext 3.1.1 Vertical Tabpanel here :)

http://iamtotti.com/blog/2010/03/extjs-vertical-tabpanel-example/

danidacila
23 Apr 2010, 1:38 AM
a GWT VerticalTabPanel based on Carina's css.
Still for this to work you need to edit gxt TabPanel.java and make all private methods & attributes as protected. Then recompile TabPanel and put the source & compiled version back into the gxt jar.



import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.util.Size;
import com.extjs.gxt.ui.client.widget.TabPanel;

public class VerticalTabPanel extends TabPanel {
public enum VerticalTabPosition {
LEFT, RIGHT;
}

private VerticalTabPosition verticalTabPosition;
private HorizontalAlignment textAlignment;
private int tabWidth;

public VerticalTabPanel() {
this(VerticalTabPosition.LEFT, HorizontalAlignment.LEFT, 150);
}

public VerticalTabPanel(VerticalTabPosition verticalTabPosition, HorizontalAlignment textAlignment, int tabWidth) {
this.verticalTabPosition = verticalTabPosition;
this.textAlignment = textAlignment;
this.tabWidth = tabWidth;
setClassName();
}

@Override
protected void onResize(int width, int height) {
Size frameWidth = el().getFrameSize();

height -= frameWidth.height;
width -= frameWidth.width + tabWidth;

body.setSize(width, height, true);
bar.setSize(tabWidth, height, true);

delegateUpdates();
}

private void setClassName() {
String className = "ux-vertical-tabs ";
if (textAlignment == HorizontalAlignment.RIGHT) {
className += "ux-vertical-tabs-alignright ";
}
className += (verticalTabPosition == VerticalTabPosition.LEFT ? "ux-vertical-tabs-left " : "ux-vertical-tabs-right ");
setStyleName(className);
}
}

maureend
28 Apr 2010, 8:41 AM
Hi alkon,

I've implemented your vertical scrolling addition to the extension - very nice. But I have an issue where even though I have set the active tab to "0", the page loads with the tabs scrolled all the way to the bottom. How do I make it so it the top tab shows by default?

Thanks so much,

Maureen

srinivas.p
22 Jun 2011, 9:11 AM
Hi, can any one give a suggestion that how to create grouped vertical tab panel. I am new to gxt....

srinivas.p
23 Jun 2011, 11:23 PM
Hi, I want to create group tab panel in GXT.
how to do that? could you please help me??