In this article, I’m explaining the action sheet in sencha touch and how to use it.
Action Sheet is useful to display a list of buttons in a popup dialog.
Example
Firstly add a container, this container will hold the other items and initial view of our project. Next add a titlebar and a button onto the titlebar, named it Launch Action Sheet, tapping on this button will show the action sheet. Now add action sheet to the container and drag-n-drop a button into it.Button inside action sheet named it Hide Action Sheet, tapping on this button will hide the action sheet.
Ext.define('MyApp.view.ActionSheetContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Action Sheet',
items: [
{
xtype: 'button',
id: 'LaunchActionSheet',
itemId: 'mybutton',
text: 'Launch Action Sheet'
}
]
},
{
xtype: 'actionsheet',
hidden: true,
id: 'ActionSheet',
style: 'color: #fff; height: 150px;',
ui: 'light',
items: [
{
xtype: 'button',
id: 'HIdeActionSheet',
itemId: 'mybutton1',
text: 'HIde Action Sheet'
}
]
}
],
listeners: [
{
fn: 'onLaunchActionSheetTap',
event: 'tap',
delegate: '#LaunchActionSheet'
},
{
fn: 'onHIdeActionSheetTap',
event: 'tap',
delegate: '#HIdeActionSheet'
}
]
},
onLaunchActionSheetTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.show();
},
onHIdeActionSheetTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.hide();
}
});
Output
When you tap on the Launch Action Sheet button, the action sheet will appear like this:
Tapping on the Hide Action Sheet button will hide the action sheet.
Leave a Comment