1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    xsid is on a distinguished road

      0  

    Default Unanswered: drawComponent.surface.add

    Unanswered: drawComponent.surface.add


    Hello
    i'm new to extjs and i am in front of a problem with drawcomponant
    i can make a draw in a window
    here is code
    Code:
    Ext.onReady(function(){ 
    
    
             Ext.create('Ext.window.Window', {
                width: 920,
                height: 620,
                layout: 'fit',
                alias:'widget.fenetre',
                items: [drawComponent]
                }).show();
             
    var drawComponent = Ext.create('Ext.draw.Component', {
    
    
        viewBox: false,
        width: 600,
        height: 500,
    
    
        items: [
            {         
            type: "path",
            path: "M 438.39286,164.92857 400.35714,151 l -51.25,35.89286 40.17858,14.46428 49.10714,-36.42857 z",
            fill: '#FF02D9',
            'fill-opacity':"1",
            'opacity':"0.6585366",
            'fill-rule':'nonzero',
            group: 'convc',
            stroke:'none'       
            }
            ]
     });
    but when i try to to add sprite i always have this error
    Uncaught TypeError: Cannot call method 'add' of undefined
    here is the code

    Code:
    drawComponent.surface.add({
        type: 'circle',
        fill: '#ffc',
        radius: 100,
        x: 100,
        y: 100
    });
    can someone help me
    thanks

  2. #2
    Sencha Premium Member GeorgeHernandez's Avatar
    Join Date
    Oct 2007
    Location
    Chicago
    Posts
    19
    Vote Rating
    0
    GeorgeHernandez is on a distinguished road

      0  

    Question


    I have the same problem.

    Many of the examples use 'surface' as an property of drawComponent, and yet 'surface' is not listed as an official property of drawComponent?

  3. #3
    Sencha User stevemc's Avatar
    Join Date
    Sep 2007
    Location
    London
    Posts
    29
    Answers
    1
    Vote Rating
    4
    stevemc is on a distinguished road

      1  

    Default


    It looks like you are creating a window with the draw component as an item before the draw component has been created. If you swap around the order with the draw component created first and then the window, everything seems to work fine.

    PHP Code:
    Ext.onReady(function() {

        var 
    drawComponent Ext.create('Ext.draw.Component', {
            
    viewBox false,
            
    width 600,
            
    height 500,
            
    items : [{
                
    type "path",
                
    path "M 438.39286,164.92857 400.35714,151 l -51.25,35.89286 40.17858,14.46428 49.10714,-36.42857 z",
                
    fill '#FF02D9',
                
    'fill-opacity' "1",
                
    'opacity' "0.6585366",
                
    'fill-rule' 'nonzero',
                
    group 'convc',
                
    stroke 'none'
            
    }]
        });

        
    Ext.create('Ext.window.Window', {
                    
    width 920,
                    
    height 620,
                    
    layout 'fit',
                    
    alias 'widget.fenetre',
                    
    items : [drawComponent]
                }).
    show();

        
    drawComponent.surface.add({
                    
    type 'circle',
                    
    fill '#ffc',
                    
    radius 100,
                    
    100,
                    
    100
                
    }).show(true);

    }); 
    You also need to call the show method when adding the circle to the surface so that the sprite is drawn.

  4. #4
    Sencha Premium Member GeorgeHernandez's Avatar
    Join Date
    Oct 2007
    Location
    Chicago
    Posts
    19
    Vote Rating
    0
    GeorgeHernandez is on a distinguished road

      0  

    Thumbs up


    Thanks stevemc. It wasn't until your example that I noticed that the sprite.show() needs the true value.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Answers
    1
    Vote Rating
    0
    the_skua is on a distinguished road

      0  

    Default


    This was helpful. It might be useful to add the .show(true) part to the documentation, since I spent a long time being confused about that.