PDA

View Full Version : Listening for end of animation on accordion layout



juger
22 Feb 2013, 3:06 PM
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
22 Feb 2013, 9:17 PM
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
25 Feb 2013, 1:02 PM
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
25 Feb 2013, 1:25 PM
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.