In this article, I’m explaining how to style the action sheet in sencha touch.
ActionSheets are used to display a list of buttons in a popup dialog.
If you want to learn how to create a simple action sheet, you can read my previous article on action sheet:
Example
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Action Sheet',
items: [
{
xtype: 'button',
id: 'ShowActionSheet',
itemId: 'mybutton',
text: 'Show Action Sheet'
}
]
},
{
xtype: 'actionsheet',
hidden: true,
id: 'ActionSheet',
enter: 'top',
exit: 'right',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Action Sheet TitleBar'
},
{
xtype: 'button',
id: 'DeleteDraft',
itemId: 'mybutton1',
ui: 'decline',
text: 'Delete Draft'
},
{
xtype: 'button',
id: 'SaveDraft',
itemId: 'mybutton2',
text: 'Save Draft'
},
{
xtype: 'button',
id: 'Cancel',
itemId: 'mybutton3',
ui: 'confirm',
text: 'Cancel'
}
]
}
],
listeners: [
{
fn: 'onShowActionSheetTap',
event: 'tap',
delegate: '#ShowActionSheet'
},
{
fn: 'onDeleteDraftTap',
event: 'tap',
delegate: '#DeleteDraft'
},
{
fn: 'onSaveDraftTap',
event: 'tap',
delegate: '#SaveDraft'
},
{
fn: 'onCancelTap',
event: 'tap',
delegate: '#Cancel'
}
]
},
onShowActionSheetTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.show();
},
onDeleteDraftTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.hide();
Ext.Msg.alert('Draft Deleted');
},
onSaveDraftTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.hide();
Ext.Msg.alert('Draft Saved');
},
onCancelTap: function(button, e, eOpts) {
var actionSheet = Ext.getCmp('ActionSheet');
actionSheet.hide();
}
});Output
Tapping on Show Action Sheet button will show the action sheet, the action sheet will enter from top and exit to right.
When you tap on either Delete Draft button or Save Draft button, you will get a message.
Leave Comment