How do I make a free flowing component layout in Sencha Touch - extjs

Question

I have a layout somewhat like so:
Ext.define('MyApp.view.MyFormPanel', {
extend: 'Ext.form.Panel',
requires: [
'...'
],
xtype: 'myformpanel',
id: 'myFormPanel',
config: {
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
cls: 'my-form-panel',
items: [
{
xtype: 'container',
items: {
xtype: 'image',
mode: 'image',
width: 150,
height: 150
}
},
{
xtype: 'fieldset',
defaults: {
xtype: 'textfield'
},
items: [
{
itemId: 'titleTextfield',
cls: 'title-textfield',
placeHolder: 'Title',
name: 'title'
}
]
},
{
xtype: 'container',
height: 100
},
{
xtype: 'container',
height: 100
},
{
xtype: 'list',
infinite: true,
onItemDisclosure: true,
mode: 'MULTI',
flex: 1
}
],
listeners: [
{
...
}
]
}
});
I want to make sure that the list takes up its natural height without scroll inside of the list – instead, I want the whole form panel to scroll up. Right now, the list takes up only the space that is left after all the contents above it are laid out.
How can I achieve this? Help is much appreciated! Thanks!

Answer 1

It turns out that the solution is not straightforward. With help from ST forum, this worked:
{
xtype: 'list',
infinite: true,
// ...
items: [
{
xtype: 'formpanel',
scrollDock: 'top'
}
]
}
Basically, I had to put all my components as scollDocked to top – inside of the list. Hope this helps.