Scrollable not working on dynamically added items

[coletek]

For the below Container, scrollable will not work correctly - it lets me scroll down to the text 'test3', but when I let go of the scroll, it goes straight back up to the top.

I'm guessing its something to do with the fact I'm using a vbox. If so, how can I pack the three items, but still have it scrollable?

Ext.define("test.view.ProfileDetails", {
    extend: 'Ext.Container',
    xtype: 'profiledetailspanel',


    config: {
        title: 'My Profile',
        scrollable: true,


        layout: {
            type : 'vbox',
            align : 'stretch'
        },


	items: [
            {
             	margin: '40 0',
                html: '<div class="img-loading"></div>'
            }
        ]


    },


    initialize: function() {
        this.callParent(); // required to make back button work                 


        this.setItems([
			{
                            margin: 20,
                            html: 'test1<br />test1<br />test1<br />test1<br />test1<br />test1<br />',
                            flex: 1
			},
                        {
                            margin: 20,
                            html: 'test2<br />test2<br />test2<br />test2<br />test2<br />test2<br />',
                            flex: 1
			},
                        {
                            margin: 20,
                            html: 'test3<br />test3<br />test3<br />test3<br />test3<br />test3<br />',

                            flex: 1
			}
                    ]);
    }


});

[coletek]

This was fixed via removing the layout setup.

However if you then change one of the items from a html to a custom xtype that uses a form.Panel it will disappear. But if you put "scrollable: false" in that custom xtype config, it appears as desired.

[jeremylauraire]

Hi,

I have quite the same problem with a container (vbox layout) that contains several containers (Panel, List and a Carousel). I would like to obtain the same effect and so far I have the exact same comportment as you describe.

I have tried your suggestion with no luck. Can you provide full code to reproduce that.

Thanks,
J.

[coletek]

Before I post the code (since it takes time).

Can you remove the vbox layout altogether? And then add "scrollable: false" to all your containers (Panel, List and a Carousel).

Cheers,

[jeremylauraire]

I have followed your suggestion + I set a "height" for all the items... and it works. Pretty tricky since I don't know exactly the vertical size of my list before it is rendered... :/

Here is the code if needed by anyone :

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


    config: {
        scrollable:'vertical',
        
        items: [
            {
                // a data view
                xtype: 'infoview',
                layout:'fit',
                scrollable:false
            },
            {
                // a carousel
                height:150,
                scrollable:false,
                xtype:'carouselpicsview'
            },
            {
                // a list
                height:600,
                xtype: 'postslist',
                items: [
                    {
                        xtype: 'listitemheader',
                        html: 'Reviews'
                    }
                ]
            }
        ]
    }


});

Finally! Thanks,
J.

[coletek]

You need to put the "scrollable:false" in the config for js files that define your infoview, carouselpicsview and postslist.

Cheers,