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