Remove added sprite from chart surface

[crummy]

I create a new sprite unitCircle and it to my scatter chart surface:



window.unitCircle = new Ext.draw.Sprite({
id : 'window.unitCircle',
type : 'circle',
radius : window.unitRadius,
fill : 'none',
stroke : 'red',
'stroke-width' : 1,
opacity : 0.09,
'stroke-opacity' : 1,
x : window.centerPosX,
y : window.centerPosY
});
Ext.Function.defer(function() {
scatChart.surface.add(window.unitCircle)
.show(true)
}, 50, this);

How do I subsequently remove the sprite unitCircle from my scatter chart scatChart.surface?

scatChart.surface.remove(window.unitCircle) results in error: Cannot call method 'onRemove' of undefined ,despite a check to remove the circle only when window.unitCircle is defined.

Any suggestions?

[crummy]

ext 4.1.1 GA

[vietits]

To remove a sprite from draw surface, we use <surface>.remove(<sprite>) or <sprite>.remove(). What you did is correct. The error happens maybe because you do the removing sprite to early, before it is added to the surface. I include here an example to add and remove a sprite to/from a draw surface.


Ext.onReady(function(){
var circle = Ext.create('Ext.draw.Sprite', {
id : 'window.unitCircle',
type : 'circle',
radius : 100,
fill : 'green',
stroke : 'red',
'stroke-width' : 1,
opacity : 0.09,
'stroke-opacity' : 1,
x : 100,
y : 100
});


var win = Ext.create('Ext.Window', {
width: 215,
height: 300,
layout: 'fit',
tbar: {
items: [{
text: 'Draw circle',
handler: function(){
win.down('draw').surface.add(circle).show(true);
}
},{
text: 'Remove circle',
handler: function(){
win.down('draw').surface.remove(circle);
// circle.remove();
}
}]
},
items: [{
xtype: 'draw',
viewBox: false
}]
}).show();
});

[crummy]

Indeed the sprite removal was premature. I was deferring sprite delete without deferring the refresh to the surface! Works now, thanks.