Home > DeveloperSection > Articles > Panel Popup in Sencha Touch

Panel Popup in Sencha Touch

Sencha Touch Sencha Touch 
0 Comment(s)
 8349  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




Panel Popup in Sencha Touch

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

Follow MindStick