[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?

[steffenk]

Hi,

it seems that gradients are only added while creation. If you change your code this way it works:

Ext.define('Canvas', {
	extend: 'Ext.draw.Component',
	viewBox: false

});

var canvas = Ext.create('Canvas', {
	gradients: [{
		id: 'blackblue',
		angle: 45,
		stops: {
			0: {
				color: 'rgb(33, 33, 33)'
			},
			100: {
				color: 'rgb(156, 178, 248)'
			}
		}
	}]
});

[philogb]

Hi, thank you for your report.

I don't believe this is an issue. I think that you are confusing configuration properties (passed in the creation of an instance) with class methods/properties defined when extending a Class from another Class. This is different. The right way to extend a class and setting these gradients as configuration by default would be to override the `constructor` method appending the gradients property to the config object and then calling the parent constructor.

Let me know if this works for you.

[johanhaest]

Hey

It worked for me thanks

Ext.define('Editor.Layout.Surface', {
    extend: 'Ext.draw.Component',
    viewBox: false,
    constructor: function (config) {
        this.gradients = [{
            id: 'gradTask',
            viewBox: true,
            angle: 25,
            stops: {
                0: {
                    color: 'rgb(255, 255, 0)'
                },
                100: {
                    color: 'rgb(255, 255, 255)'
                }
            }
        }];

        if (this.gradients) {
            Ext.apply(config, {
                gradients: this.gradients
            });
        }

        this.callParent([config]);
    }
});

[steffenk]

This should be documented as it's not selfexplained.

[slemmon]

Just ran into this myself. Any way to update how this works or if not update the documentation?

[mitchellsimoens]

There shouldn't be any reason why gradients defined on the prototype using Ext.define should not work. I'm going to reopen this report.

EXTJSIV-831