Layout 在sencha touch的同一面板上使用图像和旋转木马

我是sencha touch的新手，需要在一个简单的页面上实现此布局：

我需要一个图像，图像下方应该有一个

旋转木马

，其中包含两个用户可以滑动的图像

这是我的密码：

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

Ext.setup({
TabletStartup屏幕：“tablet_startup.png”，
phoneStartupScreen:'phone_startup.png'，
图标：“icon.png”，
格洛松尼康：错，
onReady:function（）{
//创建项目的旋转木马
var carousel1=新的外部旋转木马({
默认值：{
cls:“卡”
},
项目：[{
html:“
},
{
html:“
}
]
});
var面板=新的外部面板({
全屏：对，
html:“
});
新分机面板({
全屏：对，
布局：{
键入：“vbox”，
对齐：“拉伸”
},
默认值：{
弹性：1
},
项目：[面板，旋转木马1]
});
}
});

转盘和包含第一个图像的面板显示在页面的同一部分

我错过什么了吗

谢谢你的关注。

---

leon.

我认为您必须为您的旋转木马使用布局：“适合”（在您的面板中，而不是vbox中）。或者您可以制作另一个面板子面板，其中包含您的vbox和该子面板（{layout:'fit'}）； 我遇到了同样的问题，我相信这是可行的

GL

移除

fullscreen: true 

从sport1_顶部面板上看，这对我很有用

---

马克这个问题也困扰着我。在尝试了我所能想到的一切之后，似乎有帮助的是除去主Ext.面板上的所有全屏属性，并在所有卡片上使用“布局：'fit'”，这是我在Ext.Carousel对象中添加到默认值中的

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();