Home > DeveloperSection > Articles > Styling ActionSheet in Sencha Touch

Styling ActionSheet in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
0 Comment(s)
 3498  View(s)
Rate this:

Styling ActionSheet in Sencha Touch

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

 


Don't want to miss updates? Please click the below button!

Follow MindStick