---
title: "Animating Message Box in Sencha Touch"  
description: "In this article, I’m explaining how to animate the message box in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-08  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1318/animating-message-box-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# Animating Message Box in Sencha Touch

In this article, I’m explaining how to animate the message box in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

If you want to first learn about message box, then you can read my [previous](https://yourviews.mindstick.com/view/81421/unlock-2-0-is-just-like-previous-corona-lockdowns) article:

[https://www.mindstick.com/Articles/1333/message-box-in-sencha-touch\](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](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule): showAnimation and hideAnimation, showAnimation [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) will show the message box with [animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company) you define and hideAnimation property will hide the mesaage box with animation you define.

##### Example

First drag-n-drop a panel to the [canvas](https://www.mindstick.com/forum/1383/how-can-i-print-a-canvas-in-wpf) and add a titlebar to the panel with two buttons one for slide animation and [second](https://yourviews.mindstick.com/view/82433/the-second-wave-new-covid-19-vs-old-covid-19) for fade animation. Add tap [events](https://www.mindstick.com/blog/102/events-in-c-sharp) 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](https://www.mindstick.com/mindstickarticle/ae9c2bff-26d2-48ff-be74-b881f57d7a47/images/a621f1af-3296-40a7-816c-5558c6d400ba.png)

![Animating Message Box in Sencha Touch](https://www.mindstick.com/mindstickarticle/ae9c2bff-26d2-48ff-be74-b881f57d7a47/images/ccb92b67-d09d-46f6-8462-9384de9bb7b7.png)

---

Original Source: https://www.mindstick.com/articles/1318/animating-message-box-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.