How to change the position of the SLIDEIN animation of the panel in sencha

Question

I have a custom panel and now I added animation for the panel to be show on button click. Problem now is the start & stop positions of the animation. I want to set the position from where to start the animation and where to end it.

Now am doing this way

showAnimation: { type: 'slideIn', direction: 'up', duration: 400, easing: 'ease', listeners: { animationend: function(evt, obj) { // my code here } } }

This shows the popup from the bottom of the screen but I don't want to come all the way from bottom of the screen. Is there a way to do it?

Answer 1

Instead of showAnimation, you can use Ext.Animator.run. Here is the sample:

Ext.Animator.run({
    element: this.getNavigation().element, // this.getYourViewObject().element
    duration: 500,
    easing: 'ease-in',
    preserveEndState: true,
    from: {
       top: document.body.clientHeight // Max Height i.e Bottom
     },
     to: {
        top: 0 // Height where you want to stop your Slide View
     }
 });

If you still don't get it, feel free to comment. I'll make you a Demo.