Sencha Touch - How to remove/hide popup panel on button click
You can do it in multiple ways.
Solution 1:
To use the Ext.getCmp()
functionality, you need to have an id
property set for your component.
Hence, give an id
to your DatePanel
like shown below,
Ext.define('MyApp.view.DatePanel', {
extend: 'Ext.Panel',
alias: 'widget.DatePanel',
id:'datepanel',
config: {
......
......
and then on Cancel
button click handler, write the below code ...
{
text:'Cancel',
ui:'confirm',
action:'Cancel'
listeners : {
tap : function() {
var pnl = Ext.getCmp('datepanel');
pnl.hide();
}
}
}
Solution 2:
Since you already defined the itemid
property, you can use the following line to get the reference to your component ..
var pnl = Ext.Container.getComponent('DatePanel');
pnl.hide();
Sagar Modi
With around 8.5 years of professional experience in software development that includes full software development life cycle including design and development in Web based application. A highly motivated and ambitious individual able to give timely and accurate advice, guidance, support and training to team members and individuals. Possessing excellent management skills and having the ability to work with the minimum of supervision whilst leading a team of eight or more. Having a proven ability to lead by example, consistently hit targets, improves best practices and organizes time efficiently.
Updated on June 13, 2022Comments
-
Sagar Modi almost 2 years
I have created Panel as bellow
Ext.define('MyApp.view.DatePanel', { extend: 'Ext.Panel', alias: 'widget.DatePanel', config: { itemid:'DatePanel', modal:true, centered: true, width:'320px', height:'110px', items:[ { xtype: 'datepickerfield', label: 'Select date', type:'date', itemId: 'rptDate', value: new Date(), }, { xtype:'toolbar', docked:'bottom', items:[{ text:'OK', ui:'confirm', action:'ShowTurnOverReport' }, { text:'Cancel', ui:'confirm', action:'Cancel' } } ] }
});
I show this panel as Pop-up using bellow code
Ext.Viewport.add({xtype: 'DatePanel'});
Now on Button cancel click i want to hide/remove it
I have tried
Ext.Viewport.remove(Datepanel), var pnl = Ext.getCmp('DatePanel'); pnl.hide();
but nothing worked. how can i do this ??