1

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

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

我错过了什么吗？

感谢您的关注。莱昂。

4

3 回答 3

1

删除 

fullscreen: true

来自 sport1_top 面板为我工作

标记

于 2011-04-16T13:01:02.927 回答
1

这个问题也困扰着我。在尝试了我能想到的一切之后，似乎有帮助的是摆脱除主 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();
于 2011-07-27T21:50:40.723 回答
0

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

总帐

于 2011-03-29T10:55:39.843 回答