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:
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
Leave Comment