1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default List & Detail in Tab Panel

    List & Detail in Tab Panel


    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

    Code:
     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);
         }
     });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    71
    Vote Rating
    0
    arandlett is on a distinguished road

      0  

    Default


    Thanks.

Thread Participants: 1

Tags for this Thread