CODEWITHSUNDEEP
extjs4extjs
Shadin
Shadin

Reputation: 1967

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

Upvotes: 0

Views: 5288

Answers (4)

rejetto
rejetto

Reputation: 96

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.

Upvotes: 0

user2510365
user2510365

Reputation: 11

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

-YP

Upvotes: 1

atott
atott

Reputation: 890

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)).

Upvotes: 1

dougajmcdonald
dougajmcdonald

Reputation: 20067

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

Upvotes: 2

Related Questions