Изменить количество карт (Sencha Touch Carousel) - PullRequest
Новая
       28

Изменить количество карт (Sencha Touch Carousel)

0 голосов
/ 28 февраля 2012

В настоящее время мы работаем с каруселью Sencha Touch, и у нас возникла следующая проблема. Мы не видели простого способа показать более 3 карт / изображений (опция по умолчанию). Код выглядит так 

var gallery = new Ext.Carousel({
cls: 'galleryimage',
xtype: 'carousel',
height: '60px',
width: '65px',
items: [{
    html: '<img src="static/images/gallery/ex2.jpg" />',
    cls: 'image',
},
{
    html: '<img src="static/images/gallery/ex2_2.jpg" />',
    cls: 'image',
},
{
    html: '<img src="static/images/gallery/ex2_3.jpg" />',
    cls: 'image',
},
{
    html: '<img src="static/images/gallery/ex2_4.jpg" />',
    cls: 'image',
},
{
    html: '<img src="static/images/gallery/ex2_5.jpg" />',
    cls: 'image',
}]

});

Это довольно тревожно, что это явно не задокументировано, так как я думаю, что многие люди хотят это сделать. Я надеюсь, что есть кто-то, у кого есть действительно простой способ, без необходимости изменять другие файлы .scss.

/ * РЕДАКТИРОВАТЬ * /

Добавил этот код к нему: 

    var gallerypanel = new Ext.Panel({
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        defaults: {
            flex: 1
        },
        items: [gallery]
    });

1 Ответ

0 голосов
/ 28 февраля 2012

Вот, пожалуйста, рабочий пример с 4 картами: 

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: [
            {
                title: 'Tab 1',
                html: '1'
            },
            {
                title: 'Tab 2',
                html: '2'
            },
            {
                title: 'Tab 3',
                html: '3'
            },
            {
                title: 'Tab 4',
                html: '4'
            }]
        });


        new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            items: [carousel1]
        });
    }
});

Надеюсь, это поможет

...