Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Show/Hide/Toggle Element with ExtJS?

Tags:

extjs

How to Show/Hide/Toggle Element with ExtJS?

like image 819
Jeaf Gilbert Avatar asked Nov 02 '10 03:11

Jeaf Gilbert


2 Answers

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();
like image 166
SW4 Avatar answered Oct 17 '22 05:10

SW4


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;
like image 36
Simon Frost Avatar answered Oct 17 '22 06:10

Simon Frost