PDA

View Full Version : List & Detail in Tab Panel



arandlett
20 Dec 2011, 2:32 PM
I am using a tab panel with lists and detail pages in the panels. I have the switch between list to detail working however it works without animation.

When I add animation to the panel that the tab panel loads it works from list to detail but not back.

After the list to detail animation when I click the back button I get a console error:

"TypeError: 'undefined' is not a function (evaluating 'mainview.getMediaPanel()')"

What is the best way to accomplish this? Is not using table panel a better way to go about this or creating a wrapper panel for the list and detail?

Media.js //controller


Ext.define("MonkTouch.controller.Media",{
extend: 'Ext.app.Controller',
views : [
'List',
'ListWrap',
'Detail'
],
stores : ['Media'],
models : ['Media'],
config:{
fullscreen: true,
layout:{
type :'card',
align :'stretch'
}
},
refs:[
{
ref : 'mediaPanel',
selector: 'listwrap'
},
{
ref : 'listItems',
selector: 'listwrap > mtouch-list'
},
{
ref : 'detail',
selector: 'detail'
},
{
ref : 'titlebar',
selector: 'listwrap > titlebar'
}
],
init : function(){
this.control({
'listwrap > mtouch-list' : {
itemtap : this.onItemTap
},
'listwrap button[ui=back]':{
tap : this.onHandleBack
},
'listwrap' :{
activeitemchange : this.onHandleChange
}
});
},
onItemTap : function(list, index){
var me = this,
view = me.getDetail(),
list = me.getListItems(),
record = me.getMediaStore().getAt(index),
viewTitle = record.get('title'),
newCard = me.getMediaPanel().add({
xtype : 'detail',
data : record.data
});

me.getMediaPanel().setAnimation({
type:'slide',
direction:'left',
duration:200
});

me.getMediaPanel().setActiveItem(newCard);
me.getTitlebar().setTitle(viewTitle);
},
onHandleChange : function(view, newCard, oldCard){
var isFirst = newCard.isXType('mtouch-list');
backBtn = view.down('button[ui=back]');

backBtn.setHidden(isFirst);
if(isFirst){
view.remove(oldCard);
}
},
onHandleBack : function(){
var me = this,
mainview = me.getMediaPanel(),
titlebar = me.getTitlebar();
mainview.getMediaPanel().setAnimation({
type:'slide',
direction:'right',
duration:200
});
mainview.setActiveItem(0);
titlebar.setTitle(titlebar.defaultTitle);
}
});

mitchellsimoens
20 Dec 2011, 2:56 PM
Being in PR stages still, animations aren't 100% there. So your code looks fine to do this, we just need to wait a little till we can expect things to work a lot better.

arandlett
20 Dec 2011, 2:59 PM
Thanks.