You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

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

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

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    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)'
    			}
    		}
    	}]
    });
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    168
    Vote Rating
    0
    philogb is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    This should be documented as it's not selfexplained.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Similar Threads

  1. Replies: 4
    Last Post: 10 Apr 2011, 7:33 AM
  2. Replies: 3
    Last Post: 1 Apr 2011, 12:22 AM
  3. Replies: 5
    Last Post: 29 Mar 2011, 8:45 AM
  4. Replies: 1
    Last Post: 18 Mar 2011, 9:35 AM
  5. Replies: 1
    Last Post: 17 Mar 2011, 4:16 PM

Thread Participants: 4