articles

Home / DeveloperSection / Articles / Animating Message Box in Sencha Touch

Animating Message Box in Sencha Touch

Sumit Kesarwani 4478 08-Jun-2013

In this article, I’m explaining how to animate the message box in sencha touch.

If you want to first learn about message box, then you can read my previous article:

https://www.mindstick.com/Articles/1333/message-box-in-sencha-touch
https://www.mindstick.com/Articles/1325/entry-exit-direction-of-message-box-in-sencha-touch

In Sencha touch, Message box has two properties: showAnimation and hideAnimation, showAnimation property will show the message box with animation you define and hideAnimation property will hide the mesaage box with animation you define.  

Example

First drag-n-drop a panel to the canvas and add a titlebar to the panel with two buttons one for slide animation and second for fade animation. Add tap events to the buttons.

Ext.define('MyApp.view.MsgBoxPanel', {

    extend: 'Ext.Panel',
 
    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        id: 'SlideAnimation',
                        itemId: 'mybutton',
                        text: 'slideIN/slideOUT'
                    },
                    {
                        xtype: 'button',
                        id: 'FadeAnimation',
                        itemId: 'mybutton1',
                        text: 'fadeIN/fadeOUT'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onSlideAnimationTap',
                event: 'tap',
                delegate: '#SlideAnimation'
            },
            {
                fn: 'onFadeAnimationTap',
                event: 'tap',
                delegate: '#FadeAnimation'
            }
        ]
    },
 
    onSlideAnimationTap: function(button, e, eOpts) {
        Ext.Msg.show({
            title:'slide animations',
            showAnimation: 'slideIn',
            hideAnimation: 'slideOut'
        });
    },
 
    onFadeAnimationTap: function(button, e, eOpts) {
        Ext.Msg.show({
            title:'fade animations',
            showAnimation: 'fadeIn',
            hideAnimation: 'fadeOut'
        });
    }
});

 Output

Animating Message Box in Sencha Touch

Animating Message Box in Sencha Touch


Updated 07-Sep-2019

Leave Comment

Comments

Liked By