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
Leave Comment