Using image and carousel on the same panel in sencha touch

I am new in sencha touch and need to achieve this layout on a single simple page:

I need an image and below the image, there should be a carousel containing two another images which the user can swipe.

Here is my code:

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        // Create a Carousel of Items
        var carousel1 = new Ext.Carousel({
            defaults: {
                cls: 'card'
            },
            items: [{
                    html: "<img src='teil1.jpg' width='320' height='60' alt='开发者_如何学C' border='0'>"
                },
                {
                    html: "<img src='teil2.jpg' width='320' height='60' alt='' border='0'>"
                }
            ]
        });

        var panel = new Ext.Panel({
            fullscreen: true,
            html: "<img src='sport1_top.jpg' width='320' height='302'>"
        });

        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [panel, carousel1]
        });
    }
});

The carousel and the panel containing the first image are displayed on the same portion of the page.

Am I missing something?

Thanks for your interest. leon.

Removing the

fullscreen: true 

from the sport1_top panel worked for me

Mark

This problem was nagging me too. After trying everything I could think of, what appears to help was to get rid of all of those fullscreen properties except on the main Ext.Panel, and use "layout:'fit'" on all of the cards, which I added to my defaults in the Ext.Carousel object.

var toolbar = new Ext.Toolbar({ title: 'testing', dock: 'top'});

var around = new Ext.Carousel({                        
    ui: 'dark',
    direction: 'horizontal',
    defaults: { cls: 'card', layout:'fit' },
    items: [
        { html: 'card 1'},                            
        { html: 'card 2'},                            
        { html: 'card 3'},                            
        { html: 'card 4'},                            
    ]
})

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type : 'fit',
        align: 'top'
    },
    defaults: {
        flex: 1
    },
    items: [ around ],
    dockedItems: [ toolbar ]
});

panel.show();

I believe you have to use layout: 'fit' for your Carousel (In your Panel, instead of vbox). Or you could make another panel SubPanel that has your vbox and that SUbPanel({layout: 'fit'}); I came across the same problem, I believe this works.

GL