Animating Ext.Panel in Sencha touch 2

Question

I have this view that I want to slide in:

Ext.define('GS.view.AddBidView', {
extend: 'Ext.Panel',
    config: {   
        xtype: 'panel',
        modal: true,
        width: '100%',
        height: '50%', 
        bottom: '0%',
        hideOnMaskTap: true,
        items: [{
            xtype: 'textareafield',
            name: 'bio',        
            clearIcon: false,
            id: 'textarea',
            placeHolder: 'Ange ditt bud här...'
        },
        {
            xtype:'button',
            text: 'Lägg bud',
            docked:'bottom',
            maxWidth: '95%',
            minHeight: '45px',
            cls: 'saveBidBtn'
        }]
    },
    initialize: function() {
        this.down('#textarea').on('keyup', this.grow, this);
        this.textarea = this.element.down('textarea');
        this.textarea.dom.style['overflow'] = 'hidden';
    },

    grow: function() {
        this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content
        this.getScrollable().getScroller().scrollToEnd();
    }
});

It is rendered by this controller:

Ext.define('GS.controller.ShowModal', {
    extend : 'Ext.app.Controller',    
    config : {   
        control : {
            'button[action="showBidModal"]' : {
                tap : 'showModal'
            },
        }
    },
    showModal : function() {
        var addBidPanel = Ext.create('GS.view.AddBidView');
        Ext.Viewport.add(addBidPanel);
    }
});

How can I animate this with a slide up/slide down or similar? Tried a bunch of stuff but nothing seems to work.

All help is appreciated!

Eli Eli · Accepted Answer · 2013-02-13T05:55:38

One way is to hide the modal by default:

hidden: true

Then you can apply showAnimation and hideAnimation to show and hide your modal with specified animation, for example:

showAnimation: {
    type: 'slideIn',
    duration: 1000,
    direction: 'down'
}, 

hideAnimation: {
    type: 'slideOut',
    duration: 1000,
    direction: 'up'
},

Here is a working fiddle: http://www.senchafiddle.com/#6tN6b

Animating Ext.Panel in Sencha touch 2

1 Answers