How to set random animation on changing Tab Panel in sencha touch 2?

Question

I'm still new to sencha touch 2 and currently I'm stuck at how to set different animation each

time user switch between tab panels. Can anyone give me some hints how to accomplish this?

Thank you very much in advance.

Answer 1

Here's a big hint :

Ext.define("App.view.Main", {
  extend: 'Ext.tab.Panel',

  config: {
    fullscreen: true,
    layout: {
      animation: 'slide'
    },
    tabBarPosition: 'bottom',
    items:[{
      xtype:'panel',
      iconCls: 'home',
      title:'Tab 1',
      html:'Tab1'
    },{
      xtype:'panel',
      iconCls: 'user',
      title:'Tab 2',
      html:'Tab2'
    },{
      xtype:'panel',
      iconCls: 'info',
      title:'Tab 3',
      html:'Tab3'
    }],
    listeners:{
      activeitemchange:function(){
        this.getLayout().setAnimation(['slide','fade','cover','reveal','pop', 'flip'][Math.floor(Math.random()*6)]);
      }
    }
  }
});

Basically, when the users switch cards, it'll set a new random animation for the tabpanel's layout amongst the ones in ['slide','fade','cover','reveal','pop', 'flip'];

Feel free to contribute by adding the handling of the direction parameter

[UPDATE] handle direction

listeners:{
  activeitemchange:function(){
    var anim_with_direction = ['slide','cover','reveal'],
        anim_without_direciton = ['fade','pop', 'flip'],
        anims = anim_with_direction.concat(anim_without_direciton),
        anim,
        type = anims[0],
        direction;
    if(anim_with_direction.indexOf(type) != -1){
      direction = ['left','right','up','down'][Math.floor(Math.random()*4)];
      anim = {type:type,direction:direction};
    }else{ 
      anim = {type:type};
    }
    this.getLayout().setAnimation(anim);
  }
}