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
    6
    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
    6
    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,900
    Vote Rating
    176
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi