Extjs proper way to show/hide

Question

I'm a little new to Extjs and I'm trying to figure out the proper way to show/hide elements.

I have the following elements:

layout: 'card',
items: 
[
 {
  xtype: 'Panel1'
 },
 {
  xtype: 'Panel2'
 }
]

In my controller I have these references setup:

refs: [
{
 ref: 'p1',
 selector: 'Panel1'
},
{
 ref: 'p2',
 selector: 'Panel2'
}
],

Each panel has a form and two buttons at the bottom. Panel 2 is hidden in the beginning. Now I want to show Panel 2 and hide Panel 1. First I tried:

this.getp1().hide();
this.getp2().show();

...and that did nothing. Then, I found this SO question and tried out the following:

this.getp1().getEl().hide();
this.getp2().getEl().show();

which partially worked except that it failed to also show the buttons in Panel2. Am I supposed to get every single element and show() each of them? I must be missing something.

Answer 1

try with:

this.getP1().hide(); //the first letter should be uppercase
this.getP2().show();

Answer 2

The parent panel of my two problem items was of a layout: 'card' . According to the sencha docs on the Card layout only one panel will be shown at a time. Therefore, the proper way to show other items is not via the show/hide function, but rather calling PARENT_PANEL.getLayout().setActiveItem(n); That was causing my p2 panel to always be hidden and not affected by the show() method.