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.