[FIXED-EXTJSIV-328] Dynamically adding Sprites to a Surface

[johanhaest]

For an application I need to dynamically add sprites to a surface.
I define my class like this:

Ext.define('Test.Control.Event', {
    extend: 'Ext.draw.Sprite',
    type: 'circle',
    x: 150,
    y: 150,
    radius: 100,
    fill: '#cc5',
    stroke: 'red'
});
Ext.preg('Test.Control.Event', Test.Control.Event);

But when I try to add this to the surface it gives an error on line 20937.

custom = me.surface.customAttributes

'surface.customAttributes' is empty or no object

This is the code where I add my sprite to the surface:

canvas = new Ext.draw.Component({
    viewBox: false
});
//create a window to place the draw component in
Ext.create('Ext.Window', {
    width: 1000,
    height: 500,
    layout: 'fit',
    items: [canvas]
}).show();
 
var lEvent = new Test.Control.Event();
canvas.surface.add(lEvent);

I there any way to fix this so that I can define sprites and add them to the surface? I'd like to work with them object oriented.
Or is this already possible and am I doing it wrong?

[philogb]

Hi,

Thanks for the report. This has been fixed now. The way of creating and drawing the sprite is now:

		var canvas = Ext.create('Ext.draw.Component', {
			viewBox: false
		});
	
		Ext.define('Test.Control.Event', {
			extend: 'Ext.draw.Sprite',
			
			constructor: function() {
				this.callParent([{
					type: 'circle',
					x: 150,
					y: 150,
					radius: 100,
					fill: '#cc5',
					stroke: 'red',
					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();
	    
	    var s = canvas.surface.add(new Test.Control.Event());
	    
	    s.show(true);

Note that the constructor of the subclass has to be extended to pass in the configuration options to the superclass constructor.