1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    73
    Answers
    4
    Vote Rating
    1
    juger is on a distinguished road

      0  

    Default Unanswered: Listening for end of animation on accordion layout

    Unanswered: Listening for end of animation on accordion layout


    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:

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

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Code:
    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
                    });
                });
            }
        }
    });

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    73
    Answers
    4
    Vote Rating
    1
    juger is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    73
    Answers
    4
    Vote Rating
    1
    juger is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1