Home > DeveloperSection > Articles > Entry/Exit Direction of Message Box in Sencha Touch

Entry/Exit Direction of Message Box in Sencha Touch


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

Entry/Exit Direction of Message Box in Sencha Touch

In this article, I’m explaining how to give direction to message box for entry and exit 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/1318/animating-message-box-in-sencha-touch

In sencha touch, you can set the entry and exit direction of message box, for this purpose sencha touch provides two properties: entry and exit. Entry property 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 named showAlert() with two parameters – 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

Entry/Exit Direction of Message Box in Sencha Touch

 


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

Follow MindStick