---
title: "Panel Popup in Sencha Touch"  
description: "In this article, I’m explaining how to create a panel popup in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-05-30  
updated: 2019-12-10  
canonical: https://www.mindstick.com/articles/1310/panel-popup-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 3 minutes  

---

# Panel Popup in Sencha Touch

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370), I’m explaining how to create a panel popup in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme).\

To display a panel popup when a [user clicks](https://answers.mindstick.com/qa/34556/if-a-user-clicks-all-the-google-ads-on-my-site-is-it-foul) on [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net), we use showBy() [method](https://www.mindstick.com/forum/166/webservice-method) which is used to display a [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) within another component. The component will appear in a rounded box with a tip pointing to a [reference](https://www.mindstick.com/forum/34619/call-by-value-and-call-by-reference) component. This method accepts two [parameters](https://www.mindstick.com/articles/87/passing-parameters-in-c-sharp):

· Component : The target component.

· Alignment : The specific alignment([optional](https://www.mindstick.com/interview/22851/main-difference-between-optional-and-required-keywords)).

First we will display a button named “Show Popup” in the ShowPopupPanel, on clicking that button panel popup will show with a [message](https://www.mindstick.com/interview/682/which-are-the-various-message-map-macros) 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](https://www.mindstick.com/mindstickarticle/d1f2aca6-b734-4283-8f29-dcf9f673d966/images/0cb60723-4a69-4864-9eb9-b7ef6deec890.png)

##### 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](https://www.mindstick.com/mindstickarticle/d1f2aca6-b734-4283-8f29-dcf9f673d966/images/8ac27b96-ce42-4c78-a2c1-ed140a2fe64b.png)

---

Original Source: https://www.mindstick.com/articles/1310/panel-popup-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.