Question

I’m new to sencha touch and I am trying to create a container divided into 3 parts. The 2nd part should hold a carousel component. This is my code:

var con = new Ext.Container({
   width: '100%',
   height: '100%',
   layout: {
        type: 'vbox',
        align: 'stretch'
   },
   items: [
    {
        flex: 1,
        html: 'First',
        items: [
            {
                xtype: 'carousel',
                defaults: {
                    layout: 'hbox'
                },
                items: [
                    {
                        html: '1',
                        cls: 'card'
                    },
                    {
                        html: '2',
                        cls: 'card'
                    }
                ]
            }
        ]
    },
    {
        flex: 2,
        html: 'Second'
    },
    {
        flex: 3,
        html: 'Third'
    }
   ]
});

the result shows the 3 component parts apart from the carousel. What have I done wrong? Many thanks.

Answer 1

A couple of things:
1 – You dont need a container (first) to hold the carousel because it extends container
2 – when you use html you are setting the body of the container so any components you add will not show up

This should work with Sencha Touch 2 (havent tested with Touch 1):

        var con = new Ext.Container({
            width: '100%',
            height: '100%',
            layout:{
                type: 'vbox',
                align: 'stretch'
            },
            items:[{
                xtype: 'carousel',
                defaults: {
                    layout: 'hbox'
                },
                flex: 1,
                items:[{
                    html: '1',
                    cls: 'card'
                },{
                    html: '2',
                    cls: 'card'
                }]
            },{
                flex: 1,
                html: 'Second'
            },{
                flex: 1,
                html: 'Third'
            }]
        });