Sencha Touch 2 - 将轮播添加到面板

时间:2012-10-11 23:34:12

标签: javascript sencha-touch-2

我正在尝试将一个轮播添加到Panel视图中,该视图里面有几个子面板。当我运行代码虽然我看不到旋转木马的任何东西。其他面板看起来很好。这是我现在的代码

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
    }
]

}
});

我在这里缺少什么?

1 个答案:

答案 0 :(得分:3)

试试这段代码。这对我有用。在config中定义布局:'vbox'

            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
                }
            ]

            }
            });