Listening for end of animation on accordion layout

[juger]

How would I go about listening for the end of the default animation when an item is added to an accordion panel is completed? See the code below:

Ext.define('App.view.AccordionView', {   extend: 'Ext.panel.Panel',
     layout: {
        type: 'accordion',
animate: true
    }   
});

[slemmon]

Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: 'Panel content!'
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
    , expandCollapse: function () {
        console.log('expand - collapse');
    }
    , listeners: {
        afterrender: function (p) {
            Ext.each(p.items.items, function (item) {
                item.on({
                    expand: p.expandCollapse
                    , collapse: p.expandCollapse
                });
            });
        }
    }
});

[juger]

thanks slemmon, but that doesn't do what I need. In my application, the accordion container's contents changes dynamically and each time an item is added, it is given its own animation (by default) as it is added to the accordion. The code you gave me simply refers to the expand/collapse event and not the animation itself. What I need is a way to know when the animation on the screen has actually completed.

[juger]

It's like some kind of animation queue. For each panel added, it plays an animation in sequence without stepping on the animation of another item. I need to know when the last one is finished playing.