Results 1 to 2 of 2

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

    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
      0  

    Default 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 User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,984
    Vote Rating
    933
      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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •