---
title: "Entry/Exit Direction of Message Box in Sencha Touch"  
description: "In this article, I’m explaining how to give direction to message box for entry and exit in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-13  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1325/entry-exit-direction-of-message-box-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 5 minutes  

---

# Entry/Exit Direction of Message Box in Sencha Touch

In this article, I’m explaining how to give [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction) to message box for entry and exit 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/1318/animating-message-box-in-sencha-touch](https://www.mindstick.com/Articles/1318/animating-message-box-in-sencha-touch)

In sencha touch, you can set the entry and exit direction of message box, for this [purpose](https://www.mindstick.com/forum/161328/what-is-the-purpose-of-flush-true-in-the-print-function) sencha touch provides two [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule): entry and exit. Entry [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) define how the message will enter in the screen and exit property define how the message box will exit from the screen.

##### Example

Drag-n-drop a panel to the canvas and add a titlebar with four buttons, on tap of button the message box will show and hide but from different direction like: left, right, top ,bottom.

```
Ext.define('MyApp.view.MsgBoxPanel', {
    extend: 'Ext.Panel',
 
    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        id: 'Left',
                        itemId: 'mybutton',
                        text: 'Enter/Exit : Left'
                    },
                    {
                        xtype: 'button',
                        id: 'Right',
                        itemId: 'mybutton1',
                        text: 'Enter/Exit : Right'
                    },
                    {
                        xtype: 'button',
                        id: 'Top',
                        itemId: 'mybutton2',
                        text: 'Enter/Exit ; Top'
                    },
                    {
                        xtype: 'button',
                        id: 'Bottom',
                        itemId: 'mybutton3',
                        text: 'Enter/Exit : Bottom'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onLeftTap',
                event: 'tap',
                delegate: '#Left'
            },
            {
                fn: 'onRightTap',
                event: 'tap',
                delegate: '#Right'
            },
            {
                fn: 'onTopTap',
                event: 'tap',
                delegate: '#Top'
            },
            {
                fn: 'onBottomTap',
                event: 'tap',
                delegate: '#Bottom'
            }
        ]
    },
 
    onLeftTap: function(button, e, eOpts) {
        this.showAlert('left','left');
    },
 
    onRightTap: function(button, e, eOpts) {
        this.showAlert('right','right');
    },
 
    onTopTap: function(button, e, eOpts) {
        this.showAlert('top','top');
    },
 
    onBottomTap: function(button, e, eOpts) {
        this.showAlert('bottom','bottom');
    },
 
    showAlert: function(enterPos, exitPos) {
        Ext.Msg.show({
            title: 'Enter: ' + enterPos + ", Exit: " + exitPos,
            showAnimation: 'slideIn',
            hideAnimation: 'slideOut',
            enter: enterPos,
            exit: exitPos
        });
    }
});
```

I have created a [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-function) named showAlert() with two [parameters](https://www.mindstick.com/articles/87/passing-parameters-in-c-sharp) – enterPos and exitPos. This function will create the message box each time it called and enterPos and exitPos parameters will tell that what will be direction of message box for entering and exiting the screen.

showAlert() function is called in the tap event of every buttons.

##### Output

![Entry/Exit Direction of Message Box in Sencha Touch](https://www.mindstick.com/mindstickarticle/fb7d3c14-a337-47fe-ad25-2332387433c2/images/af8e3bd5-a30f-47ee-8367-9b8e41053b01.png)

![Entry/Exit Direction of Message Box in Sencha Touch](https://www.mindstick.com/mindstickarticle/fb7d3c14-a337-47fe-ad25-2332387433c2/images/6f8f11cc-4dec-4744-b676-62e2017cb286.png)

---

Original Source: https://www.mindstick.com/articles/1325/entry-exit-direction-of-message-box-in-sencha-touch

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