View Full Version : TabPanel activeitemchange event question

4 Jan 2012, 8:50 AM

I need to trap when a new item has been activated on a TabPanel. When breaking into the activeitemchange event and getting the activeItem of the TabPanel component, the activeItem value is still the old one (I see from the API docs why this is).

Basically I need some code to be called after a new item gets displayed, the activeitemchange event seems to be too early for me. I did see a post on using the afteritemchange event, but this doesn't seem to be being fired.

4 Jan 2012, 9:10 AM
From the API docs about the activeitemchange event:

Note that this event is fired before the value of activeItem has been updated, and that you can return false from any listener to the activeitemchange event to cancel the change.

The event fires with the new and old item so you know that the old item is going to be the new item.

4 Jan 2012, 9:27 AM
Ok, I realise my question wasn't clear enough now...

I need to know when an item has become visible. So you do something to change tab's, and the new panel\item gets displayed.

So for example, if I have a list and a map on separate tab's, and I select a list item which then causes my map to display (by calling setActiveItem on the TabPanel), I to detect once the map has finished coming into view.

Does this make sense?

4 Jan 2012, 9:32 AM
Each item will fire an activate event when that particular item has been activated. However, this also fires before the animations as the item is visually activated but off screen until the animation happens.

24 May 2012, 2:46 AM
In Sencha 2.0, "activeitemchange" event with "order=after" will do the job. It fires itself after the animation is completed.

But what if someone wants to execute some piece of code in the "child item" of that tab-panel, the one that has been switched to, after the above event was fired? So check this out:

// Add this in the tab-panel definition
listeners: {
activeitemchange: {
fn: function () {
var newtab = arguments[1]; // the new card
newtab.fireEvent('afterActiveTabChange', this, newtab /*, and whatever other params you may want*/); // a custom event
order: 'after'

// So basically a "afterActiveTabChange" event will be fired for every newcard that has been selected in the tab-panel
// Then, to use it, the developer simply has to define that event in the child item-cards like this:
// (but of course, defining this custom event in the child item-cards is optional. Only for those which it is required)

initiliaze: function () {
this.on('afterActiveTabChange', 'myCustomFunction', this);
// ...

myCustomFunction: function () {
// your code here

Looks good? ... do let me know if there's a cleaner approach. Would love to try that out.