Threaded View

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    JoelMitchell is on a distinguished road

      0  

    Default Answered: Vbox Vertical Scroll Issue

    Answered: Vbox Vertical Scroll Issue


    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:

    Code:
    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.

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


    Attachment 38421

Thread Participants: 1

Tags for this Thread