Использование изображения и карусели на одной панели в приложении sencha touch - PullRequest
Новая
       29

Использование изображения и карусели на одной панели в приложении sencha touch

1 голос
/ 28 марта 2011

Я новичок в 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]
        });
    }
});

Карусель и панель с первым изображением отображаются в одной и той же части страницы.

Ячто-то упустили?

Спасибо за ваш интерес.лев.

Ответы [ 3 ]

1 голос
/ 16 апреля 2011

Удаление 

fullscreen: true

с панели sport1_top у меня сработало

Mark

1 голос
/ 28 июля 2011

Эта проблема меня тоже мучила.После того, как я попробовал все, что мог придумать, мне помогло избавиться от всех этих полноэкранных свойств, кроме основной 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();
0 голосов
/ 29 марта 2011

Я считаю, что вы должны использовать макет: «подходит» для вашей карусели (в вашей панели вместо vbox).Или вы можете создать другую панель SubPanel, в которой есть ваш vbox и SUbPanel ({layout: 'fit'});Я столкнулся с той же проблемой, я считаю, что это работает.

GL

...