List & Detail in Tab Panel

[arandlett]

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]

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]

Thanks.