CODEWITHSUNDEEP
extjsscrolltouchcarousel
Nello
Nello

Reputation: 769

sencha touch 2 - how to add vertically scrollable component to horizontal carousel

I've spent days on this, and seriously can't understand why it should be so hard to do what seems - to me, anyway - that it should be default behaviour. Other posts seem to be asking how to prevent the behaviour I'm hoping to achieve, so I must be doing something very wrong.

I want to put this component:

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',
    scrollable: 'true',

    config: {
        scrollable: 'true',
        layout: 'vbox',

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                docked: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'
            },

         // more items to come here
        ]
    }
});

into this carousel:

Ext.define('Proximity.view.result.ResultCarousel', {
    extend: 'Ext.Carousel',
    xtype: 'detailcarousel',

    config: {
        store: 'RemoteResultStore',
        direction: 'horizontal',
        fullscreen: true,

        defaults: {
            styleHtmlContent: true,
            scrollable: true
        }  
    }
});

in such a way that if the content overflows the current screen I can scroll down to the bottom.

But when I add the panel as a bunch of items into the carousel, each page in the carousel is vertically-locked. Any overflow from the DetailPanel component is offscreen and totally unreachable.

Over the last few days I have tried every combination of layout, scroll, scrollable, fullscreen, docked and item stacking I can think of, all to no avail. Eventually, I want to add some buttons to the bottom of each DetailPanel, but that doesn't seem particularly achievable right now.

Is there any way to make this work? It should be simple, right?

Upvotes: 1

Views: 2571

Answers (1)

Nello
Nello

Reputation: 769

I found the answer, and am putting it here and in the Sencha Touch forums.

It turns out there is an undocumented config option called 'scrollDock' that makes everything I was trying to do work in the way I intended.

The following code now scrolls correctly:

Ext.define('Proximity.view.detail.DetailPanel', {
    extend: 'Ext.Panel',
    xtype: 'detailpanel',

    config: {
        layout: {
            type: 'vbox',
            align: 'start',
            pack: 'start'
        },

        items: [
            {
                xtype: 'panel',
                bodyPadding: 15,
                cls: 'detail-panel',
                layout: 'fit',
                scrollDock: 'top',
                tpl: '<h3 class="detail-name">{name}</h3>' +
                    '<img class="detail-image" src="http://src.sencha.io/-34/x50/{image}"/>' +
                    '<div class="detail-description">\"{description}\"</div>' +
                    '<div class="detail-address">{street}, {suburb}</div>'

            },
            // more stuff here
        ]
    }
});

I'm really not sure why this does not deserve documentation. Maybe someone from Sencha could enlighten us?

Anyway, I found my clue here: http://www.sencha.com/forum/showthread.php?250883-Container-on-top-of-a-list

Cheers!

Upvotes: 3

Related Questions