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

Animating Message Box in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 2488  View(s)
Rate this:

Animating Message Box in Sencha Touch

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


Don't want to miss updates? Please click the below button!

Follow MindStick