Ext JS: Why does a GridPanel within a ViewPort not have scrollbars? - extjs4.1

Question

In the simple example of a Panel within a ViewPort, the panel will not have scrollbars for the text overflow because the default for autoScroll is false for a panel.
Here is a working example: http://jsfiddle.net/rqZ4y/ (Thanks to CD..)
Here is a slightly more involved example, featuring a GridPanel (which has autoScroll defaulting to true, so it does not need to be set explicitly!)
Ext.application({
launch: function () {
Ext.create("Ext.Viewport", {
// layout: "fit",
items: [
{
html: "Hello!"
},
{
xtype: "grid",
title: 'Simpsons Contacts',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
}
]
});
}
});
Working example: http://jsfiddle.net/gXsPk/
In this case, the grid does not have scrollbars.
I have disabled layout: "fit" in order to get both the panels to show. If I specify layout: "fit" then that causes the "Hello!" panel to take up all of the available space, and the grid is not visible at all.
If I remove the "Hello!" panel, and re-introduce the layout: "fit" option, then I get a grid with scrollbars!
Working example: http://jsfiddle.net/VBAyS/
What am I doing wrong here?!
I'm using Ext JS 4.1.1a

Answer 1

The default for autoScroll is false.
Set autoScroll: true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary.
Working example: http://jsfiddle.net/rqZ4y/
EDIT:
Using vbox layout should solve your issue.
I changed the layout to:
layout: { type: 'vbox', align: 'stretch' }
Next, I've added flex: 1 to the grid.
Working example: http://jsfiddle.net/gXsPk/1/