Search code examples
extjs4extjs

toggle (hide/show) in Extjs4

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

Solution

  • 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();
    }
}