Vertical Tab Panel - Updated to work w ExtJS 3.3

[armandoxxx]

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]

Solved my problem .. I was wrapping that vertical tab panel .. so I unwrapped it ...

Regards

Armando

[astuteq]

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]

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]

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]

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]

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]

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]

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]

Here is a link to the code working for EXTJS4:

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