PDA

View Full Version : Why doesn't TabPanel have an afteradd event? What are the workarounds?



js_coder
10 Aug 2009, 9:37 AM
The effect I'm trying to achieve is to have my tab panel automaticallty activate newly created tabs.

Defining the following listener in a TabPanel unfortunately does not work as I expected it to:


listeners: {
add: function(tabs, newTab) {
tabs.setActiveTab(newTab);
}
}This code throws an error in the setActiveTab method because tabs.getTabEl(arg) returns null when the tab is not yet rendered. Wrapping the function body in an if(newTab.rendered) takes care of the error, but leaves me wondering: How can I hook into the TabPanel after a tab is added and rendered?

This example (http://examples.extjs.eu/?ex=compcomm) switches to the newly created tab as well, but does so sequentially (without a listener).

Animal
10 Aug 2009, 9:39 AM
add is an afteradd event.

beforeadd is the before add event.

Adding a child Components is entirely seperate from having that child Component rendered.

What application problem are you trying to solve?

js_coder
10 Aug 2009, 9:45 AM
The goal of this listener is for the tab panel to switch to newly added tabs. I'm not sure what you mean by "application problem," but this is required for the interface to be responsive.

If add is an afteradd event, I'd expect it to be fired after the new tab has been rendered (if deferredRender is false). This code logs "Not rendered":

listeners: {
add: function(tabs, newTab) {
if(newTab.rendered) {
tabs.setActiveTab(newTab);
} else {
console.log('Not rendered');
}
}
}

Animal
10 Aug 2009, 9:56 AM
Activating a tab renders it.

So you don't need a listener really, just do



myTabPanel.add(newComponent);
myTabPanel.setActiveTab(newComponent);


That's it.

js_coder
10 Aug 2009, 10:23 AM
Do you think that this can be accomplished with a listener on the TabPanel? I was doing exactly what you described before, but hoped to eliminate this duplication with a handler. Is there a way for a tabpanel to listen for its items' afterrender events?

Animal
10 Aug 2009, 11:37 AM
Activation causes render.

So just set it as the active tab in the add listener. That will activate it.

Unless there's something extra that you have not mentioned.

js_coder
10 Aug 2009, 11:55 AM
If that's true, then the example code I originally posted should work, right?

Animal
10 Aug 2009, 1:33 PM
Yes. Well, maybe something gets done after the add.

Try using the {delay: 1} option.

Animal
10 Aug 2009, 1:36 PM
Yes, it was a bad implementation.

TabPanels use the add event to initialize themselves. So you might have been receiving the event before TabPanel!

The code in SVN uses a template method, not an event, so you will get no interference.

For now, use the delay. When the next release comes out, you should be able to take that our.

js_coder
11 Aug 2009, 6:08 AM
Thanks for your help. Given the choice, I'll take some verbose code over delaying the page, but I'm looking forward to the next release.