PDA

View Full Version : Vbox Vertical Scroll Issue



JoelMitchell
3 Sep 2012, 12:41 AM
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
3 Sep 2012, 12:58 AM
Are you sure about that? I've tried to run you example with ExtJs 4.1.1 and everything seems Ok.


38421

JoelMitchell
3 Sep 2012, 1:28 AM
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
3 Sep 2012, 1:29 AM
Yes, I'm using a commercial version

JoelMitchell
3 Sep 2012, 1:57 AM
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!