[PR4] Ext.draw.Sprite createItem/add + surface issues

[4CastRisk]

With a lack of documents on Ext.draw I've had to draw an inference from the source on how to create simple sprites without going down the SVG path route.

Based on what I've done (and this is probably wrong) it throws an error when trying to add a sprite to a surface:

Below is some test code I wrote:

Ext.define 'Quartermaster.components.RenderSurface',
    extend: 'Ext.draw.Component'
    alias: 'Quartermaster.RenderSurface'
    
    afterRender: ->
        @callParent arguments
        
        #  Seems like this *should* be the way to create a sprite
        sprite = @surface.createItem
            type: 'rect'
            x: 50
            y: 50
            radius: 0
            lineWidth: 3
            stroke: '#55c'
            opacity: 0.8
            color: '#f00'
            # Seems redundant I need to pass the surface as a param
            surface: @surface
        
        # Below also seems redundant
        setTimeout =>
            console.log 'sprite add called'
            @surface.add sprite
            sprite.show()
        , 5000

What appears to be happening is, when I log `sprite` I can see in Illumination that the returned object has a surface member - but when I try to add the sprite, this gets deleted (line 73 in Ext.draw.Sprite) and then firefox throws an error:

me.surface is undefined

Caused by line 100 in the setAttributes method

Also tried just the following, but nothing gets added to the SVG surface:

Ext.define 'Quartermaster.components.RenderSurface',
    extend: 'Ext.draw.Component'
    alias: 'Quartermaster.RenderSurface'
    
    afterRender: ->
        @callParent arguments
        
        @surface.add
            type: 'rect'
            x: 50
            y: 50
            radius: 0
            lineWidth: 3
            stroke: '#55c'
            opacity: 0.8
            color: '#f00'
            surface: @surface

[Vezella22]

Thanks for replying, everyone. It appears we have a decent cross-section of people here and a lot of well thought-out discussion

[johanhaest]

A recatangle needs a width and a height.

A rectangle is created this way:

Ext.onReady(function () {
      var rectangle = Ext.create('Ext.draw.Component', {
        width: 210,
        height: 105,
        x: 250,
        y: 100,
        draggable: true,
        constrain: true,
        floating: true,
        renderTo: Ext.getBody(),
        items: [{
            type: "rect",
            width: 200,
            height: 100,
            x: 0,
            y: 0,
            stroke: "#000",
            "stroke-width": "2.5",
            fill: "#ff5500"
        }]
    });
}); 

This will give you an orange draggable rectangle in your body.

[4CastRisk]

Basically I have a TreeStore for an organisation chart and want to draw that on the screen, with links - seems like a lot just to create a simple rectangle, especially when I want to hang event handlers off it as well for menus, and I want to be able to dynamically add new items to the surface as the organisation grows.

Surely there is a simple API for this? I mean the developer of Raphael works at Sencha on this, and this is the API they ended up going with rather than something simpler like Raphaels?

[johanhaest]

I don't know, there doesn't seem to be any information for this at all.

[Jamie Avins]

We continue to work on documentation. A large charting document will be part of the next release and a Draw document will follow after.