How to destroy a Panel in extjs

Question

I have a border layout in which west side have few buttons. On click of buttons few panels will show in central panel. Here is example code of the one panel which display in central panel.

{
    xtype: 'myPanel', //  User define panel
    itemId: 'myPanel1',
    showZoom: false,
    showLegends:false,
    showSlider: false,
    showDataGrid: true,
    chartType: 'line',
    controlPanel:false,
    orientation: 'x'
}

Now I have one buton called setting which open one window. Window having some checkboxes. In that I have one checkbox called Legends. I want when I click on checkbox legends then from above panel showLegends : true.When showLegends is true it will create a legendpanel and on false i want to destroy that panel.

ShowLegends:true

 if (me.showLegends) {
 legendPanel = Ext.create('Igo.panel.LegendsPanel', {
     itemId: graphConfig.itemId + 'legends',
     graphId: graphConfig.itemId
 });
 }
 cPanel.add(gPanel);

How can i destroy this panel when Showlegends is false.Please help by answering this!!

Answer 1

Hope this helps, Ext.getCmp(id) gives you the object with a known id, in your case myPanel1

if (me.showLegends) {
  legendPanel = Ext.create('Igo.panel.LegendsPanel', {
  itemId: graphConfig.itemId + 'legends',
  graphId: graphConfig.itemId
  });
}else{
  Ext.getCmp("myPanel1").destroy()
}

Answer 2

 if (me.showLegends) { legendPanel = Ext.create('Igo.panel.LegendsPanel', { itemId: graphConfig.itemId + 'legends', graphId: graphConfig.itemId }); } else { if(legendPanel) parentnode.remove(legendPanel,true); //ParentNode is parent component of legentPanel, second argument oprional. }