extjs - How to get animation with card layout -

i using card layout wizard type application. how can achieve animation effect while clicking on next , previous button.

var navigate = function(panel, direction){      var layout = panel.getlayout();     layout[direction]();     ext.getcmp('move-prev').setdisabled(!layout.getprev());     ext.getcmp('move-next').setdisabled(!layout.getnext()); }; ext.create('ext.panel.panel', {     title: 'example wizard',     width: 300,     height: 200,     layout: {type: 'card'   ,             animation: {                 type: 'slide',             }},     bodystyle: 'padding:15px',     defaults: {         border: false     },     bbar: [         {             id: 'move-prev',             text: 'back',             handler: function(btn) {                 navigate(btn.up("panel"), "prev");             },             disabled: true         },         '->',         {             id: 'move-next',             text: 'next',             handler: function(btn) {                 navigate(btn.up("panel"), "next");             }         }     ],     items: [{         id: 'card-0',         html: '<h1>welcome wizard!</h1><p>step 1 of 3</p>'     },{         id: 'card-1',         html: '<p>step 2 of 3</p>'     },{         id: 'card-2',         html: '<h1>congratulations!</h1><p>step 3 of 3 - complete</p>'     }],     renderto: ext.getbody() }); 

i able achieve fade out in animation overriding setactiveitem method card layout. can see action example here: http://jsfiddle.net/q7ytj/4/.

just on application initialization step:

ext.override(ext.layout.container.card, {     setactiveitem: function (newcard) {         var me = this,             owner = me.owner,             oldcard = me.activeitem,             rendered = owner.rendered,             newindex;          newcard = me.parseactiveitem(newcard);         newindex = owner.items.indexof(newcard);          // if card not child of owner, add it.         // without doing layout!         if (newindex === -1) {             newindex = owner.items.items.length;             ext.suspendlayouts();             newcard = owner.add(newcard);             ext.resumelayouts();         }          // valid, different card?         if (newcard && oldcard !== newcard) {             // fire beforeactivate , beforedeactivate events on cards             if (newcard.fireevent('beforeactivate', newcard, oldcard) === false) {                 return false;             }             if (oldcard && oldcard.fireevent('beforedeactivate', oldcard, newcard) === false) {                 return false;             }              if (rendered) {                 ext.suspendlayouts();                  // if card has not been rendered yet, time so.                 if (!newcard.rendered) {                     me.renderitem(newcard, me.getrendertarget(), owner.items.length);                 }                  var handlenewcard = function () {                     // make sure new card shown                     if (newcard.hidden) {                         newcard.show();                     }                      if (!newcard.tab) {                         var newcardel = newcard.getel();                         newcardel.dom.style.opacity = 1;                         if (newcardel.isstyle('display', 'none')) {                             newcardel.setdisplayed('');                         } else {                             newcardel.show();                         }                     }                      // layout needs activeitem correct, set if show has not been vetoed                     if (!newcard.hidden) {                         me.activeitem = newcard;                     }                     ext.resumelayouts(true);                 };                  var handleoldcard = function () {                     if (me.hideinactive) {                         oldcard.hide();                         oldcard.hiddenbylayout = true;                     }                     oldcard.fireevent('deactivate', oldcard, newcard);                 };                  if (oldcard && !newcard.tab) {                     var oldcardel = oldcard.getel();                     oldcardel.fadeout({                         callback: function () {                             handleoldcard();                             handlenewcard();                         }                     });                  } else if (oldcard) {                     handleoldcard();                     handlenewcard();                 } else {                     handlenewcard();                 }              } else {                 me.activeitem = newcard;             }              newcard.fireevent('activate', newcard, oldcard);              return me.activeitem;         }         return false;     } });