How to destroy all instances of an object using ExtJS?

Question

I created 2 panels similar to this ExtJS structure (I know this is not the best way):

var panel = Ext.create("Ext.panel.Panel", { title: "first panel", width: 400, height: 250, renderTo: Ext.getBody(), html: "test 1" }); panel = Ext.create("Ext.panel.Panel", { title: "second panel", width: 400, height: 250, renderTo: Ext.getBody(), html: "test 2" }); 

Now I have 2 panels in my browser. And now, if I do this:

 panel.destroy(); 

He destroys only the last. So my question is: how can I destroy the first panel? Is there a method that contains all panels in a browser? Do I keep identifier panels every time to destroy them later? ...

Answer 1

Try the following:

 var objArray = Ext.ComponentQuery.query("Ext.panel.Panel"); 

objArray contains all panel objects.

Now run the for loop and destroy all the objects.

Answer 2

If you make them different variables (or an array that you control), you can destroy them separately:

 var panel1 = Ext.create("Ext.panel.Panel", { ... }); var panel2 = Ext.create("Ext.panel.Panel", { ... }); panel1.destroy(); panel2.destroy(); 

Or that:

 var panels = []; var panels[0] = Ext.create("Ext.panel.Panel", { ... }); var panels[1] = Ext.create("Ext.panel.Panel", { ... }); for (var i=0; i<panels.length; i++) { panels[i].destroy(); }