Sencha Touch - How to remove/hide popup panel on button click

extjs, modalpopups, sencha-touch, sencha-touch-2

Solution

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();

Problem

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 ??

Original source