PDA

View Full Version : Vertical Tab Panel - Updated to work w ExtJS 3.3



tot2ivn
21 Oct 2010, 8:22 AM
I created this extension called Vertical TabPanel since Ext 3.1.1. As ExtJS currently just supports Horizontal TabPanel.
Basically this extension works the same way as the regular horizontal TabPanel (http://dev.sencha.com/deploy/dev/docs/?class=Ext.TabPanel)except I added some CSS tweaks to push the Tab strip to the left.

I think this is quite useful in many projects. :D

http://www.sencha.com/forum/attachment.php?attachmentid=22967&d=1287678622


Extension v0.2 updated to work with ExtJS 3.3.
Tested working on IE6+, FF2+, Chrome 4+, Safari 4+, and Opera 10.x

Check out the live example here (http://iamtotti.com/playground/js/ext-3.3.0/examples/tabs/tabs.html)

Download (http://code.google.com/p/ext-tot2ivn-vertical-tabpanel/downloads/detail?name=Ext.ux.tot2ivn.VrTabPanel_v0.2_Examples.zip&can=2&q=)the whole example ( put files in folder : ext-3.3.0\examples\tabs )
Download (http://code.google.com/p/ext-tot2ivn-vertical-tabpanel/downloads/detail?name=Ext.ux.tot2ivn.VrTabPanel_v0.2.zip&can=2&q=)the extension code only

Cheers, ~o)

Totti

godghdai
21 Oct 2010, 5:35 PM
good work !! thank to share

mitchellsimoens
21 Oct 2010, 6:30 PM
Wonder if you could use CSS3 transforms to rotate the tab so it's actually vertical. CSS3 would rotate the text too. You could see if the browser supports it or not. If it does, rotate it. If not, then use what you have now.

Just a thought.

demon222
21 Oct 2010, 10:57 PM
Good job!

and how it will behave when there are more tabs than the planned region? some paging?
and if you can set the region on the right side?

Greetings

tot2ivn
23 Oct 2010, 1:47 AM
Thank you guys !

@mitchellsimoen (http://www.sencha.com/forum/member.php?22216-mitchellsimoens): Yeah, nice idea. I think I could add that functionality to the extension.. but not sure if that's a bit too funky for majority of desktop-like web apps.

@demon222 (http://www.sencha.com/forum/member.php?24810-demon222): yeah, usually the height of each tab title is fixed, so currently, I leave the tab strip cut off if its size is larger than the whole panel's height. I will add some scroller like that of Ext.TabPanel. :)

Putting the tab strip on the right would be straight forward..but I think we don't have that many use cases for that tab style, do we ?

nxminh
31 Oct 2010, 5:26 AM
good work !! thank to share
but It work on 3.2 ??

tot2ivn
31 Oct 2010, 8:03 AM
good work !! thank to share
but It work on 3.2 ??

@nxminh (http://www.sencha.com/forum/member.php?59996-nxminh): Thanks man. Yes, It works with ExtJS 3.1, 3.2 and 3.3.

astuteq
25 Feb 2011, 1:42 AM
Hello,

great plugin! This is exactly what I'm looking for, but I need the Tab-Strips on the right side. Otherwise I can't use it.

It seems that this is still not possible? Can this be done? I think this would be a very good improvement and makes this plugin much more useful in many cases.

Thanks!

Stefan

tot2ivn
27 Feb 2011, 5:52 PM
Hello,

great plugin! This is exactly what I'm looking for, but I need the Tab-Strips on the right side. Otherwise I can't use it.

It seems that this is still not possible? Can this be done? I think this would be a very good improvement and makes this plugin much more useful in many cases.


Thanks Stephan, I've also received a couple of requests regarding the Tap-Strips on the right.
Will make an upgrade this week to add this feature in. This shouldn't be a big task.

talha06
28 Feb 2011, 1:27 AM
great extension, thanks a lot for sharing tot2ivn.. ;)

armandoxxx
10 Mar 2011, 6:10 AM
Dude

I just updated to ver 0.21 and I get an error in console:
Uncaught TypeError: Cannot call method 'setStyle' of undefined
Ext.ux.tot2ivn.VrTabPanel.Ext.extend.onResizeExt.ux.tot2ivn.VrTabPanel.js:539
Ext.BoxComponent.Ext.extend.setSizeext-all-debug.js:12091
Ext.layout.FitLayout.Ext.extend.setItemSizeext-all-debug.js:13316
Ext.layout.FitLayout.Ext.extend.onLayoutext-all-debug.js:13309
Ext.layout.ContainerLayout.Ext.extend.layoutext-all-debug.js:13089
Ext.Container.Ext.extend.doLayoutext-all-debug.js:12896
Ext.layout.CardLayout.Ext.extend.setActiveItemext-all-debug.js:13367
Ext.TabPanel.Ext.extend.setActiveTabext-all-debug.js:30381
Ext.TabPanel.Ext.extend.onStripMouseDownext-all-debug.js:30074

here's the code where I create my vertical tab panel ...


var modelsPanel = new Ext.Panel(
{
id : 'tab-panel-model-management',
title : LOCALE_SECURITY_MODEL_MANAGEMENT,
layout : 'fit',
border : false,
items : [
new Ext.ux.tot2ivn.VrTabPanel(
{
activeTab : 0,
border : false,
tabPosition :'left', //choose 'left' or 'right' for vertical tabs; 'top' or 'bottom' for horizontal tabs
tabWidth :100,
defaults : {
autoScroll: true
},
items:[
getPermissionsPanel(), //my functions that create panels...
getDomainsPanel(),
getActionsPanel()
]
}
)
]
}
);


Regards

Armando

armandoxxx
10 Mar 2011, 8:19 AM
Solved my problem .. I was wrapping that vertical tab panel .. so I unwrapped it ...

Regards

Armando

astuteq
17 Mar 2011, 1:11 AM
Thanks Stephan, I've also received a couple of requests regarding the Tap-Strips on the right.
Will make an upgrade this week to add this feature in. This shouldn't be a big task.

Hi tot2ivn,
did you have already some time to get the tab-strips to the right?
Maybe you can point me to the right direction, so I could try to update the code.

thanks,
Stefan

pwelby
20 Jul 2011, 12:02 PM
Hello tot2ivn...

I really, ReaLLY like your vertical tab extension :), as I was not too impressed with the Group tab panel (vertical tab panel) that EXTJS 3 had come out with. It was not very configurable, and it looks like they even scrapped it for EXTJS4.

Do you have any plans to get your Vertical Tab Panel working for EXTJS 4?

RandyIntegra
8 Nov 2011, 11:41 AM
Would love to see this plugin work with Ext 4, Its sad that something like this hasn't become a built in feature (especially with the ext designer tool).

tot2ivn
8 Nov 2011, 12:32 PM
Thank you guys for your interest in the extension. I currently don't have any projects using ExtJS anymore, but will try to make this plugin work w Ext 4.0 in the near future due to quite a number of interest requests.

Cheers,

Totti

P/S: If anyone can take the code and make it work with ExtJS 4, please do so and make it yours. I don't have any restrictions on the license although I originally put GPL3, but I think it's not necessary anymore.

JNason
27 Apr 2012, 11:20 AM
Does anyone know if there is a known bug with this extension where form textfields cannot be selected in firefox? I have a nested form in the tab and cannot select text with the mouse in a textfield in firefox. I have no problem with a regular tabpanel or with other browsers.

JNason
30 Apr 2012, 9:53 AM
Does anyone know if there is a known bug with this extension where form textfields cannot be selected in firefox? I have a nested form in the tab and cannot select text with the mouse in a textfield in firefox. I have no problem with a regular tabpanel or with other browsers.

Ok I found the problem. In the css it had this:


-webkit-user-select: none;
-moz-user-select:none;

I commented those out and it is working. I'm not sure if those were a critical part of the extension, but so far it is working. I will post back if I find any problems with it.

lonxx
4 Jul 2012, 3:30 AM
When removing the width property from code the whole thing breaks.

example:

var tabs = new Ext.ux.tot2ivn.VrTabPanel({
renderTo: 'tabs1',
activeTab: 0,
frame:true,
//width:450,
bodyStyle: 'padding: 10px',
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: 'Short Text'},
{contentEl:'markup', title: 'Long Text'}
]
});

I want to make it possible to fit it 100% inside of the panel and resize it properly.
But now the right-side content will go below the tabs.

PaulyWolly
5 Jul 2012, 11:43 AM
Here is a link to the code working for EXTJS4:

http://lucian.lature.net/extjs/demo/VerticalTabPanel/

c632529389
13 Jul 2012, 6:32 PM
Thank you very much!!Great job!!

koolll
26 Nov 2012, 1:06 AM
Ext js version 4 can work?