Problems scrolling through list

[Togle]

I am having problems scrolling through a list when it is placed after another element in a panels items.
The problem is that is seems the list is extending byond the screen so it goes back to the beginning then you release the list.

My code is as follows:


TestPanel = Ext.extend(Ext.Panel, {
xtype: 'form',
items: [{
xtype: 'fieldset',
style: "padding-left:2%; padding-right:2%",
defaults: {labelWidth: '20%'},
items: [{
xtype: 'selectfield',
name: 'filter',
label: 'Filter',
options: [{
text: 'Test1',
value: 'value1'
},{
text: 'Test2',
value: 'value2'
}
]}
]},
{
xtype: 'list',
id: 'testList',
grouped: true,
indexBar: false,
store: ListStore,
itemTpl: '<div class="room"><strong>{romnavn}</strong>{romtype}</div>'
}
],
})


Can anyone help?

[steve1964]

You have to set the height of the list, try height: '100%'

[Togle]

Thanks, setting the height to 100% helped a bit, but the last elements still went off the screen.
After some experimentation I found 77% to work best.
But this dosent seem like a good flexible solution?

[dbottillo]

put the panel before the list inside dockedItems property instead of items
and set the height of the list to 100%