Question

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

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

我错过了什么吗？

感谢您的关注。利昂。

Answer 1

删除

fullscreen: true

来自sport1_top面板的

为我工作

标记

Answer 2

这个问题也在唠叨我。在尝试了我能想到的一切之后，看起来有帮助的是摆脱所有那些全屏属性，除了在主Ext.Panel上，并在所有卡上使用“layout：'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();

Answer 3

我相信你必须使用布局：'fit'用于你的Carousel（在你的Panel中，而不是vbox）。或者您可以创建另一个具有您的vbox和SUbPanel的面板SubPanel（{layout：'fit'}）; 我遇到了同样的问题，我相信这有效。

GL

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

3 个答案: