Show panel below list sencha touch - list

Question

I want to place a panel below a list but it seems the panel is always over top of the list. I dont want to set a height on the list as it might have no records or 20 so the height varies.
I simply want my panel to show right below my list. Also note I have disabled scrolling.
Rad.views.testList = Ext.extend(Ext.List, {
fullscreen: true,
layout: 'hbox',
scroll: false,
align: 'top',
store: Rad.stores.test,
itemTpl: Rad.views.testTemplate(),
});
topPanel = new Ext.Panel({
fullscreen: true,
scroll: true,
layout: {
type: 'vbox',
pack: "start",
align: "start"
},
defaults: {
width: '100%',
},
items: [
{
layout: 'hbox',
items: [testList]
},
{
html: 'This will be on the list not below!'
]
});
Ext.apply(this, {
layout: {
type: 'vbox',
pack : 'top',
},
dockedItems: [titlebar],
items : [ topPanel]
});

Answer 1

I should have been using Panels with Data View.
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="photosLocation">{pic}{name}',
'</div>',
'</tpl>'
);
var panel = new Ext.Panel({
width:535,
autoHeight:true,
layout:'hbox',
title:'Simple DataView',
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ alert('click'); }
}
},
items: new Ext.DataView({
store: Rad.stores.deals,
tpl: tpl,
autoHeight:true,
itemSelector:'div.photosLocation',
})
});