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

  3. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Answers
    3
    Vote Rating
    -1
    vdaiev is an unknown quantity at this point

      0  

    Default


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


    Untitled.jpg

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

      0  

    Default


    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.

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    11
    Answers
    3
    Vote Rating
    -1
    vdaiev is an unknown quantity at this point

      0  

    Default


    Yes, I'm using a commercial version

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

      0  

    Default


    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!

Thread Participants: 1

Tags for this Thread