Vbox Vertical Scroll Issue

[JoelMitchell]

Hi there,

I'm having issues with getting a scrollbar to appear inside a panel nested in the centre region of a border layout. The centre region is a card layout and the panel i'm having issues with contains two child panels in a vbox layout. The upper panel has a fixed height and the bottom panel should take up the remaining height of the panel, and be scrollable when content overflows.

I've stripped down my code to try and isolate the problem:

Ext.onReady(function () {

    var body = Ext.create('Ext.Viewport', {
        layout: 'border',
        minWidth: 900,

        items: [{
                layout: 'fit',
                region: "north",
                height: 100,
                margins: '0 0 5 0',
                border: false,
                html: '<p style="padding: 5px;">Header</p>'
            }, {
                region: "west",
                collapsible: true,
                margins: '0 0 0 0',
                minWidth: 200,
                maxWidth: 400,
                flex: 1,
                html: '<p style="padding: 5px;">West Content</p>'
            }, {
                /* Centre Region */
                region: "center",
                layout: 'card',
                margins: '0 5 0 5',
                minWidth: 300,
                activeItem: 0,
                flex: 1,
                items: [
                    {
                        border: false,
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [{
                                border: false,
                                xtype: 'panel',
                                title: 'Upper Centre Content',
                                items: [{
                                    height: 150,
                                    layout: 'fit',
                                    html: 'Top Content'
                                }]
                        }, {
                                /* Problem panel will not scroll */
                                border: false,
                                title: 'Lower Centre Content',
                                autoScroll: true,
                                flex: 1,
                                html: '<p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p><p>OverflowingContent</p>'
                            }]
                    }
                ]
            }, {
                region: "east",
                minWidth: 500,
                flex: 2,
                layout: 'fit',

                items: [{
                        html: '<p style="padding: 5px;">East Content</p>',
                        border: false,
                        layout: 'fit',
                        title: 'East Content'
                }]
            }]
    });
});

The problem was noticed after we upgraded from 4.1 OS to 4.1 Commercial but it is feasible it was broken in the upgrade from 4 to 4.1 and we just didn't notice it - we had to do some layout fixes in that upgrade.

[vdaiev]

Are you sure about that? I've tried to run you example with ExtJs 4.1.1 and everything seems Ok.


Untitled.jpg

[JoelMitchell]

Are you using the commercial licence version? I'll try it out with the open source version and see if I still get the issues.

[vdaiev]

Yes, I'm using a commercial version

[JoelMitchell]

Strangely enough I went back and ctrl-refreshed and it started working - I've been playing around with it for a few days and I can't see anything that I changed recently to make it start working. I applied the bits I changed to production code and it seems to be working. I think it was adding the flex value to the panel that fixed it.

Thanks for your help!