Learning Sencha Touch, and already love it. Much better then JQTouch in my opinion. Just working on some app idea I had, and I need to have 2 tabs where the first tab will hold a ext.List with some data. I've come this far, but have one problem I can't figure out.

Problem: The detailpanel won't show when I touch a name from the list. When it wasn't in a tab panel, I had no problems at all. Tried the forums, can't find the solution.

This is my entire code (based upon many examples):


ShotjesApp=newExt.Application({
name
:"Shotjes",
launch
:function(){

ShotjesApp.detailPanel =newExt.Panel({
id
:'detailpanel',
tpl
:'Omschrijving: {Naam} <br> <br> {Inhoud}',
dockedItems
:[
{
xtype
:'toolbar',
items
:[{
text
:'terug',
ui
:'back',

handler
:function(){
ShotjesApp.mainView.setActiveItem('listwrapper',{type:'slide', direction:'right'});
}
}]
}
]
});

ShotjesApp.listPanel =newExt.List({
id
:'disclosurelist',
store
:ListStore,
itemTpl
:'<div class="contact">{Naam} {Basis}</div>',
grouped
:true,
onItemDisclosure
:function(record, btn, index){
var naam = record.data.Naam;
ShotjesApp.detailPanel.update(record.data);
ShotjesApp.mainView.setActiveItem('detailpanel')//THIS WON'T WORK?
ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
}
});

ShotjesApp.listWrapper =newExt.Panel({
id
:'listwrapper',
layout
:'fit',
items
:[ShotjesApp.listPanel],
dockedItems
:[
{
dock
:'top',
xtype
:'toolbar',
title
:'Shotjes'

}],

});

ShotjesApp.mainView =newExt.TabPanel({
tabBar
:{
dock
:'bottom',
ui
:'dark',
layout
:{ pack:'center'}
},
cardSwitchAnimation
:{
type
:'fade',
cover
:true
},

items
:[{
title
:'Shotjes',
cls
:'card 1',
id
:'card 1',
items
:[ShotjesApp.listWrapper,ShotjesApp.detailPanel],
iconCls
:'home',
layout
:'card',

},{
title
:'About',
cls
:'card 2',
id
:'card 2',
html
:'about',
iconCls
:'calendar',
layout
:'card',
}],

tabBarDock
:'bottom',
fullscreen
:true,
layout
:'fit'
});


}
});