Hybrid View

    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
    4,982
    Vote Rating
    182
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


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

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