Sencha Touch 2 - Add Carousel to Panel

Question

I'm trying to add a carousel to a Panel view, which has several sub-panels inside. When I run the code though I can't see anything from the carousel. The other panels appear just fine. Here's the code I've got now

Ext.define('app.view.HeroDetail', {
extend: 'Ext.Panel',
requires: ['Ext.Carousel'],
xtype: 'herodetail',
layout: 'vbox',
fullscreen: true,

config: {

items: [
    {
        xtype: 'panel',
        html: 'first panel',
        flex: 1
    },

    {
        xtype: 'carousel',
        items: [
            {
                xtype: 'panel',
                html: 'carousel1'
            },
            {
                xtype: 'panel',
                html: 'carousel2'
            }
        ],
        flex: 1
    },

    {
        xtype: 'panel',
        html: 'second panel',
        flex: 1
    }
]

}
});

What am I missing here?

Answer 1

Try this code. This is working for me. Defines layout:'vbox' inside config.

            Ext.define('app.view.HeroDetail', {
            extend: 'Ext.Panel',
            requires: ['Ext.Carousel'],
            xtype: 'camerapanel',
            fullscreen: true,
            config: {
            layout: 'vbox', //defines layout inside config
            items: [
                {
                    xtype: 'panel',
                    html: 'first panel',
                    flex: 1
                },

                {
                    xtype: 'carousel',
                    flex: 1,
                    items: [
                        {
                            xtype: 'panel',
                            html: 'carousel1'
                        },
                        {
                            xtype: 'panel',
                            html: 'carousel2'
                        }
                    ]

                },

                {
                    xtype: 'panel',
                    html: 'second panel',
                    flex: 1
                }
            ]

            }
            });