Vertically scrollable container does not really scroll...

[jeremylauraire]

Hi Senchamen,

I have trouble trying to have a container scrolling with several items attached : such as a Panel, a Carousel and a List. Basically I would like to obtain a vertically scrollable overflow container. To perform this I have used a vbox layout that is set to scrollable vertical.

I have found a couple of posts on the same subject on the forum (Scrollable not working on dynamically added items) and I have tried the solutions given with no luck.

Here is the code my code for the container so far...

/* 
 *
 * The scrollable container
 *
 */
Ext.define('MyApp.view.DetailView', {
    
    extend  : 'Ext.Container',
    xtype   : 'detailview',


    config: {
        layout : {
            type  : 'vbox',
            align : 'stretch'
        },
        scrollable:'vertical',
        
        items: [
            {
                // a data view
                flex:1,
                xtype: 'infoview',
                layout:'fit',
                scrollable:false


            },
            {
                // a carousel
                flex:1,
                scrollable:false,
                xtype:'carouselpicsview'
            },
            {
                // a list
                flex: 2,
                xtype: 'reviews',
                items: [
                    {
                        xtype: 'listitemheader',
                        html: 'Reviews'
                    }
                ]
            }
        ]
    }


});

I the put this container into a navigation view. The container scrolls but then stick back to 0px position which is not excepted. Any suggestion?

Thank you,
J.

[jeremylauraire]

Basically here is the trick :

• do not use a vbox to do that,
• set scrollable:false to all the elements but a List,
• set a height too or layout 'fit'...

Should work. Here is the code :

/* 
 * 
 */
Ext.define('MyApp.view.DetailView', {
    
    extend  : 'Ext.Container',


    config: {


        scrollable:'vertical',
        
        items: [
            {
                // a data view
                xtype: 'infoview',
                layout:'fit',
                scrollable:false
            },
            {
                // a carousel
                xtype:'carouselview',
                height:100,
                scrollable:false
            },
            {
                // a list
                height:600,
                xtype: 'mylist',
                items: [
                    {
                        xtype: 'listitemheader',
                        html: 'Reviews'
                    }
                ]
            }
        ]
    }


});

J.