---
title: "Styling ActionSheet in Sencha Touch"  
description: "In this article, I’m explaining how to style the action sheet in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-21  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1349/styling-actionsheet-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 5 minutes  

---

# Styling ActionSheet in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to [style](https://www.mindstick.com/articles/126300/apa-citation-style-get-to-know-about-it-for-your-next-assignment) the [action](https://yourviews.mindstick.com/view/81713/strict-action-needed-on-counterfeit-drugs-in-india) sheet in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

ActionSheets are used to display a list of buttons in a [popup](https://www.mindstick.com/blog/11734/how-to-create-advanced-popup-or-banners-with-news-images-discounts-in-magento2) dialog.

If you want to learn how to create a [simple](https://www.mindstick.com/blog/63525/get-the-most-out-of-maths-with-these-8-simple-tricks) action sheet, you can read my [previous](https://yourviews.mindstick.com/view/81421/unlock-2-0-is-just-like-previous-corona-lockdowns) 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](https://www.mindstick.com/interview/34427/explain-the-output-in-angular)

![Styling ActionSheet in Sencha Touch](https://www.mindstick.com/mindstickarticle/682a35a0-4552-4003-a487-d0c8eba15fdb/images/ee646f4c-f660-4fcb-9158-94654006f9a3.png)

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](https://www.mindstick.com/mindstickarticle/682a35a0-4552-4003-a487-d0c8eba15fdb/images/b07db058-f4df-49c0-986f-e10d5343ae02.png)

When you tap on either [Delete](https://www.mindstick.com/forum/34101/xceed-datagrid-with-insert-update-delete) Draft [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) or Save Draft button, you will get a message.

![Styling ActionSheet in Sencha Touch](https://www.mindstick.com/mindstickarticle/682a35a0-4552-4003-a487-d0c8eba15fdb/images/15d027d5-1041-4e02-9f42-2bf865204f8a.png)

---

Original Source: https://www.mindstick.com/articles/1349/styling-actionsheet-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.