[B2] Gradients not working when I extend Ext.draw.Component

[johanhaest]

When I to add gradients to my extended class from Ext.draw.Sprite it always crashes in internet explorer.
Here is my extended class:

Ext.define('Editor.Layout.Surface', {
    extend: 'Ext.draw.Component',
    viewBox: false,
    gradients: [{
        id: 'blackblue',
        viewBox: true,
        angle: 90,
        stops: {
            0: {
                color: 'rgb(33, 33, 33)'
            },
            100: {
                color: 'rgb(156, 178, 248)'
            }
        }
    }]
});

lSurface = Ext.create('Editor.Layout.Surface', {});

But when I just create an instance of the Ext.draw.Component is does not crash and shows the gradient:

lSurface = Ext.create('Ext.draw.Component', {
            viewBox: false,
            gradients: [{
                id: 'blackblue',
                viewBox: true,
                angle: 90,
                stops: {
                    0: {
                        color: 'rgb(33, 33, 33)'
                    },
                    100: {
                        color: 'rgb(156, 178, 248)'
                    }
                }
            }]
        });

The error message:

'gradientsCall' is empty or no object

on this line:

if (fillUrl.charAt(0) == "#") {
         gradient = me.gradientsColl.getByKey(fillUrl.substring(1));
}

If you like a testcase:

Ext.onReady(function () {
           // Test with the extended class:
           Ext.define('Canvas', {
                  extend: 'Ext.draw.Component',
                  viewBox: false,
                  gradients: [{
                          id: 'blackblue',
                          angle: 45,
                          stops: {
                                 0: {
                                      color: 'rgb(33, 33, 33)'
                                 },
                                 100: {
                                     color: 'rgb(156, 178, 248)'
                                 }
                          }   
                  }]
           });

           var  canvas = Ext.create('Canvas');

            //Test with the instance of Ext.draw.Component:
//            var canvas = Ext.create('Ext.draw.Component', {
//                viewBox: false,
//                gradients: [{
//                    id: 'blackblue',
//                    angle: 45,
//                    stops: {
//                        0: {
//                            color: 'rgb(33, 33, 33)'
//                        },
//                        100: {
//                            color: 'rgb(156, 178, 248)'
//                        }
//                    }
//                }]
//            });

            Ext.define('Test.Control.Event', {
                extend: 'Ext.draw.Sprite',

                constructor: function () {
                    this.callParent([{
                        type: 'circle',
                        x: 150,
                        y: 150,
                        radius: 100,
                        fill: 'url(#blackblue)',
                        stroke: '#000',
                        surface: canvas.surface
                    }]);

                }
            });

            //create a window to place the draw component in
            Ext.create('Ext.Window', {
                width: 1000,
                height: 500,
                layout: 'fit',
                items: [canvas]
            }).show();

            s = canvas.surface.add(new Test.Control.Event());
            s.show(true);
        });

The 2 different methods are in there, you can see that the content of the defined class is the exact same as the instance of the component.

Is this a bug or am I extending whrong?