PDA

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



tcurdt
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?

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

tcurdt
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?

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

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

mitchellsimoens
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

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

Thanks!