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