extjs4 - toggle (hide/show) in Extjs4

Question

I am trying to do something like : when user click on the button, the child panel will show/hide

the issue is the 'onbtnClick' function is working just once. when i click on the button the panel shows and then when i click it again nothing happens and no errors tho ! the panel should hide

Answer 1

By the looks of it, there isn't really much need to pass a boolean param to the function.

If you purely want a 'toggle' function, based on the panels visibility and you have a reference to the Ext component, you can use the isVisible() function:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-isVisible

So your onBtnClick function would look something like this:

onbtnClick: function (){
    var childPanel = Ext.getCmp('p');

    if(childPanel.isVisible()) {
        childPanel.hide();
    }
    else {
        childPanel.show();
    }
}

Answer 2

onbtnClick: function (){
    var childPanel = Ext.getCmp('p');

    if (!childPanel.isHidden()) {
        childPanel.hide();
    } else {
        childPanel.show();
    }
}

Instead isVisible() use method isHidden() because method isVisible may return false when the panel is covered by other components or is not rendered yet (even when your panel has not got hidden property (hidden = false)).

Answer 3

panel.getEl().toggle(); will serve your purpose.

-YP

Answer 4

you have setVisible, taking a boolean parameter to know what to do.

childPanel.setVisible( ! childPanel.isVisible() )

This example will actually toggle the visibility at each execution.