在 sencha touch 的同一面板上使用图像和轮播答案

【问题标题】：Using image and carousel on the same panel in sencha touch在 sencha touch 的同一面板上使用图像和轮播
【发布时间】：2011-07-24 06:42:48
【问题描述】：

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

我需要一张图片，图片下方应该有一个carousel，其中包含另外两个用户可以滑动的图片。

这是我的代码：

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

轮播和包含第一张图片的面板显示在页面的同一部分。

我错过了什么吗？

感谢您的关注。莱昂。

【问题讨论】：

标签： layout sencha-touch panel carousel

【解决方案1】：

我相信您必须为轮播使用 layout: 'fit' （在您的面板中，而不是 vbox）。或者你可以制作另一个面板 SubPanel 有你的 vbox 和那个 SUbPanel({layout: 'fit'}); 我遇到了同样的问题，我相信这可行。

【讨论】：

【解决方案2】：

删除

fullscreen: true

sport1_top 面板为我工作

标记

【讨论】：

【解决方案3】：

这个问题也困扰着我。在尝试了我能想到的一切之后，似乎有帮助的是摆脱除主 Ext.Panel 上的所有这些全屏属性，并在我添加到我的所有卡片上使用“布局：'适合'” 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();

【讨论】：