How to Show/Hide/Toggle Element with ExtJS?

开发者_运维百科How to Show/Hide/Toggle Element with ExtJS?

Very straightforward, at the element level (further to the comments below):

Ext.get("my-div");

Where my-div is the id of the element in question.

See here and here

At the component level:

Ext.getCmp('idofthecomponent').getEl().show();
Ext.getCmp('idofthecomponent').getEl().hide();
Ext.getCmp('idofthecomponent').getEl().toggle();

See here (show), here (hide) and here (toggle) respectively. So 'idofthecomponent' would be, say the id assigned to a Panel object.

You can also refer to the element directly using other selectors, such as document.getElementbyId, eg.

 document.getElementById('elementtoshow').show();

Ext.AbstractComponent has a hidden property which you can set as true in initialization and then alter programatically on demand

items: [{
     xtype: 'button',
     itemId: 'submitButton',
     text: 'Submit',
     hidden: true
}]

and then later...

me.getComponent('submitButton').hidden = false;