Click one Panel, Hide other Panels - Ext JS - extjs

Question

I have three separate buttons with controllers. When one of the buttons is clicked, a panel is created and displayed (with animation). Here's what one of my controllers looks like:
Ext.define('AM.controller.Prod_Select', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'#prod_select': {
click: this.prodSelect
}
});
},
prodSelect: function() {
var subPanel = Ext.create('Ext.panel.Panel', {
width: 200,
height: 160,
html: '<center><p class="sub_panel_text "> Link <br /> Link <br /> Link </p> </center>',
bodyStyle: 'background:#010a4d',
border:false,
floating: true,
shadow: false,
style: 'opacity: 0;',
x: 770,
y: 75,
cls: 'sub_panel'
});
subPanel.show();
subPanel.animate({
duration: 1000,
to: {
opacity: .6,
x: 800,
y: 75
}
});
console.log('Clicked Prod');
}
});
This works just fine, but currently I can click one button x amount of times, and it will create x amount of panels. What I want out of this controller, however, is to create only a single panel from a click AND hide any other panel (with fade out) that may displayed already out of the three.
Is there any way to accomplish this? Thanks for reading!

Answer 1

You could add a property to the subPanel so it can be easily selected using ComponentQuery, then iterate through the query's results and hide the other panels.
var subPanel = Ext.create('Ext.panel.Panel', {
someCustomProperty: 'someCustomValue',
...
});
var allPanels = Ext.ComponentQuery.query('panel[someCustomProperty="someCustomValue"]');
Ext.Array.each(allPanels, function(panel) {
if (panel === subPanel) {
//show it
} else {
//hide it
}
});