Sencha Animation effect using Architect

[kramprabhu]

I am developing sencha touch application using Architect.
My page have a 3 panel positioned vertically

A
B
C

I need to animate it so that.. 'A' appear first and then 'B' and then 'C' with some 2 second interval.

I am not getting any document reference about doing it via Architect.

Please help
-Ram

[AndreaCammarata]

You can provide a "showAnimation" config for all the panels where you will specify different "delay" values on each of them.

Panel A:

{
     xtype: 'panel',
     showAnimation: {
          type: 'slideIn',
          delay: 200
     }
}

Panel B:

{
     xtype: 'panel',
     showAnimation: {
          type: 'slideIn',
          delay: 400
     }
}

and so on...

[kramprabhu]

I tried yours... but I dont see the animation

sample below

Ext.define('MyApp.view.test3', {
extend: 'Ext.Panel',
alias: 'widget.test3',


config: {
itemId: 'test3',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
html: 'A',
showAnimation: {
type: 'slideIn',
delay: 200
}
},
{
xtype: 'panel',
flex: 1,
html: 'B',
showAnimation: {
type: 'slideIn',
delay: 400
}
}
]
}


});