articles

Home / DeveloperSection / Articles / Action Sheet in Sencha Touch

Action Sheet in Sencha Touch

Sumit Kesarwani 6947 07-Jun-2013

In this article, I’m explaining the action sheet in sencha touch and how to use it.

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

Example

Firstly add a container, this container will hold the other items and initial view of our project. Next add a titlebar and a button onto the titlebar, named it Launch 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

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

Action Sheet in Sencha Touch

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


Updated 07-Sep-2019

Leave Comment

Comments

Liked By