ST2 animation of a modal panel.

[davidchan]

Hi,

Currently, I created a popup (extended from Panel, modal: true). After running panel.show(), it just appears.

I would like it to animate it from bottom to up. Not sure how to proceed. I have added the below to the panel configuration to no avail.

Ext.define('MyApp.view.AgentDetails', {
    extend: 'Ext.Panel',
    xtype: 'agentdetails',
    config: {
        modal: true,
        hideOnMaskTap: true,
        centered: true,
        height: '90%',
        width: '90%',
        layout: {
            animation: {
                type: 'slide',
                duration: 500
            }
        },
        items:[
            {
                xtype: 'toolbar',
                title: 'Agent Details',
                docked: 'top'
            },
            {
                xtype: 'container',
                html: 'Showing details'
            }
        ]
    }
});

Thanks!

[mitchellsimoens]

Animations aren't fully baked in just yet.

[rdougan]

Yeah. Unfortunately there is no easy way to do this right now.

[shweta.saxena09]

show: function(animation) {
        this.callParent();
        Ext.Animator.run([{
            element  : this.element,
            xclass   : 'Ext.fx.animation.SlideIn',
            direction: Ext.os.deviceType == "Phone" ? "right" : "left",
            duration : this.animationDuration
        }, {
            element : 'imageCarasoul',
            xclass  : 'Ext.fx.animation.SlideIn',
            duration: this.animationDuration,
            direction: Ext.os.deviceType == "right"
        }]); 
    }

this code showing error... when i use in 1st card, and work properly in other card.