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

  Modified On Nov-17-2017 08:36:10 AM

Leave Comment