Home > DeveloperSection > Articles > Action Sheet in Sencha Touch

Action Sheet in Sencha Touch


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

Action Sheet in Sencha Touch

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.


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

Follow MindStick