---
title: "Action Sheet in Sencha Touch"  
description: "In this article, I’m explaining the action sheet in sencha touch and how to use it."  
author: "Sumit Kesarwani"  
published: 2013-06-07  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1316/action-sheet-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 4 minutes  

---

# Action Sheet 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 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) and how to use it.\

Action Sheet is useful to display a list of buttons in a popup dialog.

##### Example

Firstly add a [container](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-container), this container will hold the other [items](https://www.mindstick.com/articles/44359/store-your-valuable-items-in-a-mini-storage-unit) and initial view of our project. Next add a [titlebar](https://www.mindstick.com/forum/1013/how-to-change-font-color-and-size-of-titlebar-in-sencha-touch) and a button onto the titlebar, [named](https://answers.mindstick.com/qa/44918/what-is-a-no-day-yet-named-motion) it [Launch](https://www.mindstick.com/news/2241/what-does-the-launch-of-google-cloud-s-own-node-hosting-service-mean-for-web3-developers) 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

![Action Sheet in Sencha Touch](https://www.mindstick.com/mindstickarticle/6136b85d-b17a-49e5-97c8-4608854f764a/images/8717e98f-760d-407a-8e00-b21ea2a7d9ac.png)

When you tap on the Launch Action Sheet button, the action sheet will appear like this:

![Action Sheet in Sencha Touch](https://www.mindstick.com/mindstickarticle/6136b85d-b17a-49e5-97c8-4608854f764a/images/98318c62-9f61-45b4-9abc-d7846b5666dc.png)

Tapping on the Hide Action Sheet button will hide the action sheet.

---

Original Source: https://www.mindstick.com/articles/1316/action-sheet-in-sencha-touch

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