View Full Version : when/where to change a DOM element

22 Jan 2012, 9:29 AM
I have a TabPanel and in some of it's panel items I need to show/hide a div.
What I have tried to use is to listen on "activate" and then call the code:

new Ext.TabPanel({
items: mypanels,
listeners: {
activate: function() {
// show/hide a "div" element inside one of the mypanels

Unfortunately this does not seem to always work. Seems to be a timing issue.
Where else would I do such a things?

23 Jan 2012, 8:38 AM
cardswitch is fired when the current active tab is changed. activate will only fire when the tabpanel is activated.

23 Jan 2012, 9:00 AM
Ignore the fact that it is a TabPanel for now. Would "activate" be the right handler to change the DOM after it has been loaded inside a normal Panel?

23 Jan 2012, 9:13 AM
activate fires when that component is visually shown. So if you have items in a card layout, when the active item changes in the card layout, activate will fire on the children and cardswitch will fire on the container of the items.

23 Jan 2012, 9:39 AM
Thanks for clarifying that distinction but I am not sure that helps in my case.

I still don't know which handler to rely on that tells me that the component's html is available in the DOM so that I can e.g. show/hide a div that is part of the Panel content.

I looking for something like a "ready()" handler for that panel - to speak in jquery lingo. I would think that "activate" is fired after all elements are in the DOM but seems like that's a wrong assumption.

23 Jan 2012, 9:47 AM
render is the event that fires when the component is actually in the DOM. Anythign after that the DOM should be there... afterrender, activate

23 Jan 2012, 9:59 AM
Kind of means that my problem must be somewhere else
...but at least the handler should be OK to use then.