Sencha Touch - Карусель внутри контейнера

Question

Я новичок в sencha touch и пытаюсь создать контейнер, разделенный на 3 части.Вторая часть должна содержать карусельный компонент.Это мой код:

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'
    }
   ]
});

В результате показаны 3 составные части, кроме карусели.Что я сделал не так?Большое спасибо.

Answer 1

Пара вещей:
1 - Вам не нужен контейнер (первый) для хранения карусели, поскольку он расширяет контейнер.
2 - когда вы используете html, вы устанавливаете тело контейнера, поэтому добавленные вами компоненты не будут отображаться

Это должно работать с Sencha Touch 2 (не тестировалось с 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'
            }]
        });