Home > DeveloperSection > Articles > Panel Popup in Sencha Touch

Panel Popup in Sencha Touch


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

Panel Popup in Sencha Touch

In this article, I’m explaining how to create a panel popup in sencha touch.

To display a panel popup when a user clicks on button, we use showBy() method which is used to display a component within another component. The component will appear in a rounded box with a tip pointing to a reference component. This method accepts two parameters:

·         Component : The target component.

·         Alignment : The specific alignment(optional).

 First we will display a button named “Show Popup” in the ShowPopupPanel, on clicking that button panel popup will show with a message and a tip pointing to button.

Step 1:

Drag-n-drop a panel from toolbox in the canvas and give name “ShowPopupPanel”

Ext.define('MyApp.view. ShowPopupPanel', {

    extend: 'Ext.Panel',

 

    config: {

    }

});

 

Now add a button to the panel with tap listener.

Ext.define('MyApp.view.ShowPopupPanel', {

    extend: 'Ext.Panel',

 

    config: {

        items: [

            {

                xtype: 'button',

                itemId: 'mybutton',

                margin: 50,

                ui: 'confirm',

                text: 'Show PopUp'

            }

        ],

        listeners: [

            {

                fn: 'onMybuttonTap',

                event: 'tap',

                delegate: '#mybutton'

            }

        ]

    },

});

 

ShowPopupPanel will show like this:

Panel Popup in Sencha Touch

Step 2:

Add another panel to the project, this panel will act as a popup.

Ext.define('MyApp.view.Popup', {

    extend: 'Ext.Panel',

    alias: 'widget.Popup',

 

    config: {

        height: '30%',

        html: 'I am Panel Popup',

        itemId: 'popup',

        left: '5%',

        padding: 10,

        top: '0%',

        width: '40%',

        hideOnMaskTap: true,

        modal: true

    }

});

 

Give name and alias name “Popup” to the panel and set the properties like above.

 

 

Step 3:

Now write the below code in the tap event of the button.

 

  onMybuttonTap: function(button, e, eOpts)

    {

        var me = this;

        var popup = Ext.widget('Popup'); // Get reference of the panel popup

        popup.showBy(button);  // Call the method to display the panel popup

    }

 

Output

Panel Popup in Sencha Touch


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

Follow MindStick