Vertical Tabs in ExtJS4 - Ext.ux.tab.VerticalPanel

[Monkee]

Simple Ext4 widget to render vertical tabs.

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

The code is not stable yet (after all, it's "release early, release often"), I have to solve a nasty bug related to tabs having "autoHeight" property set to true first. You can see what is all about if you visit the demo and check the first example.
For now, it seems that the widget is miscalculating its height, taking into consideration only the height of the tab.Bar and not the one of tab.Panel.

If you have any ideas on how to solve that bug and help a fellow coder, please reply to this thread
Still, any contributions of testing, improvements or other constructive feedback are greatly appreciated.

UPDATES:
21/06/2011 - VerticalBar extends Toolbar in order to solve some IE issues. Tested in IE6, IE7 and IE9 (I forgot about IE8, but it should be fine), Chrome 12 on Mac and Safari. Still unstable on Opera (I believe it's a rendering bug in the way docked items are being added into a layout, but I will have to dig more on this).

Enjoy!

[nicobarten]

This is almost what i need not exactly, but i hope you don't mind if i try to change it a bit in my code? I'm trying to create a version with bigger tabs (more height each tab) and with the left border 'docked' to the left border of the panel it's inside in.

It look very nice

[pkli]

Nice work.

A quick view in Chrome 12 Mac let me see that tab title overflow ("Normal tab" and "Disabled tab" in third example) add a scroller under text.

I think you have just to force overflow:hidden ....

[ValterBorges]

Showing up really weird on IE8. Can't read tab and it's floating away from the grid.

[Monkee]

@pkli: "overflow: hidden" was already there, maybe you should increase a little bit the width of the tabs to avoid the horizontal scrollbars.

@ValterBorges: there were some problems not only in IE8, but in IE9 also, and I think I've solved those problems, please check the latest version of the demo.

[littletree]

In what ways is your version an improvement over the one at http://iamtotti.com/blog/2010/03/ext...panel-example/?

Additionally, your demo page doesn't provide a link to download, but maybe this was intentional.

Either way, great work!

[littletree]

Ok, so I beat my head against a wall for a while today while getting the following error:

layout.owner is undefined

in ext-all-debug.js line 23050.

After a bit of digging I found that by commenting out the following line:

me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);

in VerticalPanel.js (around line 93), I no longer get the error, and the page loads fine.

Any ideas why? I am loading it into the page as a property of my main viewport class like so:

Ext.define('LT.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    title: 'Test Tabs',
    items: [{
        activeTab: 0,
        plain: true,
        xtype: 'tabpanel',
        region: 'center',
        layout: 'card',
        items: [{
            title: 'Normal Tab',
            xtype: 'verticaltabpanel',
            border: false,
            activeTab: 0,
            tabsConfig: {
                width: 150,
                marginTop: 5,
                textAlign: 'right'
            },
            items: [{
                title: 'Normal Tab',
                html: "My content was added during construction."
            }, {
                title: 'Test Tab 1',
                //autoLoad:'ajax1.htm'
                html: "Yeah there is stuff here in Vertical Tab 1."
            }, {
                title: 'Test Tab 2',
                html: "Yeah there is stuff here in Vertical Tab 2."
                //autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            }, {
                title: 'Event Tab',
                //listeners: {activate: handleActivate},
                html: "I am tab 4's content. I also have an event listener attached. not gonna fire"
            }, {
                title: 'Disabled Tab',
                disabled: true,
                html: "Can't see me cause I'm disabled"
            }]
        }, {
            title: 'Ajax Tab 1',
            html: 'yeah no ajax 1'
            // autoLoad:'ajax1.htm'
        }, {
            title: 'Ajax Tab 2',
            html: 'uh, sorry no tab 2 to see here'
            //  autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
        }, {
            title: 'Disabled Tab',
            disabled: true,
            html: "Can't see me cause I'm disabled"
        }]
    }]
});

[petar_chan]

there is no download link. Where is this extention VerticalPanel.js

[littletree]

there is no download link. Where is this extention VerticalPanel.js

http://lucian.lature.net/extjs/ux/tab/VerticalPanel.js

I'm not sure if he intentionally left out this link or not, but nonetheless that's where I found it.
Never underestimate the power of right click -> view source. :-)

[petar_chan]

in view source never mention for a VerticalPanel.js but very easy with firebug and seeing witch js files are loading. Very lame question by me. But good work with this plug-in, Monkee. :-)