Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7755 in 4.2.0.265.
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    m_laci is on a distinguished road

      0  

    Default Animations needs to be stopped manually - by design or bug?

    Animations needs to be stopped manually - by design or bug?


    REQUIRED INFORMATION


    Ext version problem encountered:
    • Ext 4.1.3 Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)
    Ext version problem tested but not encountered:
    • Ext 4.1.0 (?) Build date: 2012-04-20 14:10:47 (19f55ab932145a3443b228045fa80950dfeaf9cc)

    Browser versions tested against:
    • Chrome 23.0.1271.64
    • IE 9.0.10

    Description:
    • Animations attached to the body of an Exp.panel.Panel needs to be stopped manually.
    • Is this something is required by design? Previous version did not had an issue with that

    Steps to reproduce the problem:
    • 1. Create a class that extends Ext.panel.Panel
    • 2. In the onRender use this.body.animate to attach an animation
    • 3. Create an instance of this class
    • 4. Destroy the created instance of this class

    The result that was expected:
    • It appears to work correctly

    The result that was not expected:
    • It keeps outputting to following error to the console: "Cannot read property 'style' of undefined

    Test Case:


    Code:
    describe('Animation_issues', function () {
        Ext.define('AnimatedPanel', {
            extend: 'Ext.panel.Panel',
            onRender: function () {
                var me = this;
                me.callParent(arguments);
                me.body.animate({
                    to: {
                        opacity: 1
                    },
                    duration: 2000,
                    easing: "easeIn",
                    from: {
                        opacity: 0
                    }
                });
            },
    
    
            onDestroy: function () {
                var me = this;
                /*
                if (me.body && me.body.getActiveAnimation()) {
                    me.body.stopAnimation();
                }
                */
                me.callParent(arguments);
            }
        });
    
    
        it('should stop animations properly', function () {
            var panel = Ext.create('AnimatedPanel', { renderTo: Ext.getBody()});
            panel.show();
            panel.destroy();
        });
    });

    Possible fix:
    • If this is something we are required to do by design, than we should call manually stopAnimation

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Windows 7 Enterprise

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,065
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I guess it probably wouldn't hurt to do that. However for elements the component doesn't know about, that would need to be up to you to stop the animation.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1

Tags for this Thread