Remove Scrollbar From Viewport Ext JS 4 - extjs4

Question

I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!

Answer 1

Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.