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