PDA

View Full Version : [FIXED-EXTJSIV-328] Dynamically adding Sprites to a Surface



johanhaest
25 Mar 2011, 1:25 AM
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
26 Mar 2011, 7:16 PM
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.