Vertical Toolbar for ExtJS 3.4?

[scottlusk.cis]

I'm currently using ExtJS 3.4.0 and have a custom component that was created that extends Ext.Toolbar. There is a good bit of custom logic added and I would like to re-use that component for a new application.

A problem I'm having though is I would like for the toolbar to be aligned vertically down the right side of my panel instead of horizontally across the top.

It seems this is available in ExtJS 4.0? Is there anywhere to do this in ExtJS 3.4 without having to create a new component all together? Upgrading to ExtJS 4.0 is not an option at this time either due to project constraints.

I've tried using a vbox layout with the toolbar but that is apparently not enough. Thanks for any input you can give regarding this.

[mitchellsimoens]

There is no vertical toolbar. You can create a lookalike. Using hbox on the parent container, create a Container using the vbox layout and add buttons to it. You will need to give the toolbar lookalike container a width.

[brittongr]

another option is using column layout:

new Ext.Panel(
    {
        renderTo: "container2",
        width: 300,
        items: [
        {
            title: 'Inner Panel',
            html: "Your Content",
            columnWidth: 1,
            border: false
        },
        {
            style: "background-color:#d0def0;padding-left:2px;",
            width: 27,
            tbar: new Ext.Toolbar(
            {
                cls: "x-inline-toolbar",
                width: 25,
                items: [
                {
                    id: "Button1",
                    text: 'A',
                    //iconCls: "icon-accept"
                }, 
                {
                    id: "Button2",
                    text: 'B',
                    //iconCls: "icon-add"
                }, 
                {
                    id: "Button3",
                    text: 'C',
                    //iconCls: "icon-application"
                }, 
                {
                    id: "Button4",
                    text: 'D',
                    //iconCls: "icon-bell"
                }, 
                {
                    id: "Button5",
                    text: 'E',
                    //iconCls: "icon-bomb"
                }],
                layout: "auto",
                flat: true
            }),
            bodyStyle: "background-color:#d0def0;",
            border: false
        }],
        layout: "column",
        title: "Vertical Toolbar"
    });

vertical-toolbar.png