Displaing a hidden panel using ComponentQuery - Ext JS

Question

I simply want to show a hidden panel on the click of a button.

Currently I have this code:

search: function(btn) }
   btn.up('panel').nextSibling().show();
   ...

Which locates the parent panel and shows() the next sibling of that panel. (I think I explained that correctly..?)

However, I feel it would be more efficient to maybe use the ComponentQuery to call the panel I want to show, as the layout of my application is likely to change down the road and that would alter the hierarchy of my components and their functions.

Here's my hidden List view(panel) that I want to show:

Ext.define('AM.view.metadata.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.metadatalist',
    title: '<center>Results</center>',
    store: 'Metadata', 
    ...

Any ideas?

Answer 1

You can give your panel a itemId

Ext.define('AM.view.metadata.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.metadatalist',
    title: '<center>Results</center>',
    store: 'Metadata', 
    itemId: 'targetPanel'

and use this ComponentQuery

search: function(btn) 
    Ext.ComponentQuery.query('#targetPanel');
    ...