1

私は sencha touch の初心者で、単一のシンプルなページでこのレイアウトを実現する必要があります。

画像が必要で、画像の下にcarousel、ユーザーがスワイプできる別の 2 つの画像が含まれている必要があります。

これが私のコードです：

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

この問題も私を悩ませていました。考えられるすべてを試した結果、メインの 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 に答える
1

の取り外し 

fullscreen: true

私のために働いたsport1_topパネルから

マーク

于 2011-04-16T13:01:02.927 に答える
0

カルーセルに layout: 'fit' を使用する必要があると思います(vboxの代わりにパネル内で)。または、vbox とその SUbPanel({layout: 'fit'}); を持つ別のパネル SubPanel を作成することもできます。私は同じ問題に遭遇しました。これはうまくいくと思います。

GL

于 2011-03-29T10:55:39.843 に答える