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

  Modified On Nov-30-2017 01:06:01 AM

Leave Comment