Question

Why I am not getting a slide-effect when page is changing? here is my code

launch: function() {
        var panel = Ext.create('Ext.Panel', {
            layout: 'card',
            fullscreen: true,
            items: [
                {
                    html: "Splash Screen<img src='images/logo.png' />"
                },
                {
                    html: "Login Screen<img src='images/logo.png' />"
                },
                {
                    html: "About Screen"
                },
                {
                    html: "User Screen"
                }
            ]
        });

        panel.setActiveItem(0);

        setTimeout(function(){
            panel.setActiveItem(1);
        },3000);

After 3 seconds I am getting login screen but without any slide animation. I checked both in chrome and ipad-simulator.

Answer 1

Try something like this inside your setTimeout:

panel.setActiveItem(1, {type:'slide', direction:'left'});

I believe you can also change your [layout: ‘card’] line to something like this to achieve the same effect:

layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left'
            }
        }