Horizontal Scroll Bar appearing even though only the vertical one should be.

[XPEHBAM]

Hello, I have a border layout panel like such:

43297

The red center region panel has multiple elements in it and should scroll vertically when needed. Currently, my code looks something like this:


items: [{
region: 'north',
//header
}, {
autoScroll: true,
region: 'center',
xtype: 'container',
layout: {
type:'vbox',
align: 'center'
},
items: this.createItems()
},{
region: 'south'
//footer

}];

createItems: function() {
return [{
xtype: 'container',
items: [
this.createPanel1(),
this.createPanel2(),
this.createPanel3()
],
layout: {
type:'vbox',
align: 'stretch'
},
width: 600
}];
}




It works well now because when the page shrinks horizontally, the red panel is still centered and only the whitespace on the sides shrinks. However, when the height is not enough to fit the whole thing, a horizontal scroll bar appears as well. What would really be nice is an overflowX type of config for containers.

Is there a way to stop this behavior or implement it another way so that it doesnt?

[slemmon]

You might look at overflowY instead of autoScroll: true.
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Component-cfg-overflowY