articles

Home / DeveloperSection / Articles / Styling ActionSheet in Sencha Touch

Styling ActionSheet in Sencha Touch

Sumit Kesarwani 7135 21-Jun-2013

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:

http://www.mindstick.com/Articles/6136b85d-b17a-49e5-97c8-4608854f764a/?Action%20Sheet%20in%20Sencha%20Touch

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

Styling ActionSheet in Sencha Touch

Tapping on Show Action Sheet button will show the action sheet, the action sheet will enter from top and exit to right.

Styling ActionSheet in Sencha Touch

When you tap on either Delete Draft button or Save Draft button, you will get a message. 

Styling ActionSheet in Sencha Touch

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By