View Full Version : [FIXED] Animations needs to be stopped manually - by design or bug?

14 Nov 2012, 1:02 AM

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


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:

describe('Animation_issues', function () {
Ext.define('AnimatedPanel', {
extend: 'Ext.panel.Panel',
onRender: function () {
var me = this;
to: {
opacity: 1
duration: 2000,
easing: "easeIn",
from: {
opacity: 0

onDestroy: function () {
var me = this;
if (me.body && me.body.getActiveAnimation()) {

it('should stop animations properly', function () {
var panel = Ext.create('AnimatedPanel', { renderTo: Ext.getBody()});

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

14 Nov 2012, 3:11 AM
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.