2

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

Saurabh Gokhale
  • 53,625
  • 36
  • 139
  • 164
Sagar Modi
  • 770
  • 2
  • 7
  • 29

1 Answers1

6

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();
Saurabh Gokhale
  • 53,625
  • 36
  • 139
  • 164
  • Thanks a lot its work fine with var pnl = Ext.getCmp('datepanel'); pnl.hide();. but one issue was there it gives warning when i again open this panel like (Please ensure the existing component has been destroyed) so i used pnl.destroy(); instead pnl.hide(); – Sagar Modi May 07 '12 at 05:39
  • You can use itemId instead of id. And then identify component using Ext.ComponentQuery.query('#yourItemId')[0]; – Nikhil S Jan 13 '15 at 18:37