PDA

View Full Version : Problems with ext.List inside a Tabpanel? Please help me..



Dannydekr
19 Aug 2011, 6:24 AM
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 = new Ext.Application({
name: "Shotjes",
launch: function() {

ShotjesApp.detailPanel = new Ext.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 = new Ext.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 = new Ext.Panel ({
id: 'listwrapper',
layout: 'fit',
items: [ShotjesApp.listPanel],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Shotjes'

}],

});

ShotjesApp.mainView = new Ext.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'
});


}
});