Problems getting split carousels on a TabBar Panel

[PapaAdams]

I have setup a Toolbar for my user interface with four separate menu items. One of these menu's I would like to have 2 carousels split vertically so that the user can scroll them on either side of the device

My current code is as follow; (It was taken from the Tabs and Toolbar Demo)

Project.views.item = Ext.extend(Ext.Panel,{
    title: "Item",
    iconCls: 'calendar',
    incomMask: true,
});


Ext.reg('cocktails', Project.views.Item);

I am trying to get the following code to work on this panel (Taken from the Layouts Demo)

Ext.setup({
    onReady: function() {


        var topChanger = new Ext.Carousel({
            items: [
                {style: "background-color: #D55B5B;"},
                {style: "background-color: #B22222;"},
                {style: "background-color: #7C0505;"}
            ]
        });


        var centerChanger = new Ext.Carousel({
            items: [
                {style: "background-color: #FFDD00;"},
                {style: "background-color: #FFBF00;"},
                {style: "background-color: #FF8F00;"}
            ]
        });


        var bottomChanger = new Ext.Carousel({
            items: [
                {style: "background-color: #7BB300;"},
                {style: "background-color: #3B7E00;"},
                {style: "background-color: #0E3E00;"}
            ]
        });
        
        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {flex: 1},
            items: [topChanger, centerChanger, bottomChanger]
        });


    }
});

Thanks in advance for your help!

[Mthor]

kitchen sink has an example of this

[mitchellsimoens]

I'm not sure exactly what you are wanting but if you want the 3 carousels to be side by side then use hbox instead of vbox.