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

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

Code:

---

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:

Code:

---

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:

Quote:

---

'gradientsCall' is empty or no object

---

on this line:

Code:

---

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

---

If you like a testcase:

Code:

---

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?

Hi,

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

Code:

---

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)'
                        }
                }
        }]
});

---

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.

Hey

It worked for me thanks

Code:

---

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]);
    }
});

---

This should be documented as it's not selfexplained.

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

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