1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default Unanswered: How do I get vertically scrolling components working inside a carousel?

    Unanswered: How do I get vertically scrolling components working inside a carousel?


    Hi,

    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.

    I want to put this component:
    Code:
    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:
    Code:
    Ext.define('Proximity.view.result.ResultCarousel', {
        extend: 'Ext.Carousel',
        xtype: 'detailcarousel',
    
    
        config: {
            store: 'RemoteResultStore',
            direction: 'horizontal',
            fullscreen: true,
    
    
            defaults: {
                styleHtmlContent: true,
                scrollable: true
            }
        }
    });
    but when I do, each page in the carousel is vertically-locked. Any overflow from the DetailPanel component is offscreen and totally unreachable:

    Screen Shot 2013-06-09 at 9 June, 11.40.47.png

    Over the last few days I have tried every combination of layout, scroll, scrollable, fullscreen 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 seems like it should be simple, right?
    Attached Images

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    17
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Try this...

    Try this...


    I don't have a problem with scrollable panels in carousels....I did a quick test defining a panel like this:

    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.Panel',
        alias: 'widget.mypanel',
    
    
        config: {
            html: 'bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah blah bla blah  '
        }
    
    
    });

    ...and then the carousel like this, adding scrollable: vertical to the mypanel instance and it works.

    Code:
    Ext.define('MyApp.view.MyCarousel', {
        extend: 'Ext.carousel.Carousel',
    
    
        requires: [
            'MyApp.view.MyPanel'
        ],
    
    
        config: {
            items: [
                {
                    xtype: 'mypanel',
                    scrollable: 'vertical'
                }
            ]
        }
    
    
    });
    I would recommend experimenting with Sencha Architect and download the trial....should be easy to mock something up like this

    :-)

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    8
    Vote Rating
    0
    nello is on a distinguished road

      0  

    Default


    I found the answer, but I'm really not very happy about it. It turns out there is an undocumented config option called 'scrollDock'. With it: everything works, without it: total fail.

    http://www.sencha.com/forum/showthre...-top-of-a-list

    My code now reads:

    Code:
    Ext.define('Proximity.view.detail.DetailPanel', {
        extend: 'Ext.Panel',
    
    
        xtype: 'detailpanel',
        alias: 'widget.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>'
    
    
                },
                {
                    xtype: 'panel',
                    bodyPadding: 15,
                    docked: 'bottom',
                    cls: 'button-panel',
                    layout: {
                        type: 'hbox',
                        align: 'start',
                        pack: 'start'
                    },
                    items: [
                        {
                            xtype: 'button',
                            ui: 'action',
                            text: 'Call',
                            margin: '0 15 15 15',
                            flex: 1,
                            height: 36
                        },
                        {
                            xtype: 'button',
                            ui: 'action',
                            text: 'Visit Site',
                            margin: '0 15 15 15',
                            flex: 1,
                            height: 36
                        }
                    ]
                }
            ]
        }
    });
    I'd be much happier if I didn't get to the solution essentially by fluke. Why is there no doc on this?

    (@digeridoopoo Thanks for your help. I'm guessing that the example you posted works because it's not a template and no internal items are involved. Sencha Touch is plain weird about both of these.)

Thread Participants: 1

Tags for this Thread