Hi,

I'm doing early testings on how to use Ext Sencha as a canvas-alike API. My first test was to draw a grid of circles, each of them is filled with a random-generated color and has a MouseUp listener that will :
- trigger a new random-generated color for that specific circle
- animate the circle to a new (x, y) absolute coordinate (also random-generated)

Well.. everything is randoming well but there's an unexpected behavior here. At the end of the loop the drawComponent will render the circles grid, fine. However once you click on a circle the callback is called, fine... but only the last button added to the canvas (so the bottom right one) will animate itself.
So that's strange because it seems the callback is triggered by another button.... but the myCircle will always refer to the last one's reference.

Any idea? Cheers

Code:
for( i = 0; i < 3; i++) {            for( j = 0; j < 4; j++) {


                var myCircle = drawComponent.surface.add({
                    type : 'circle',
                    x : 100 + 200 * i,
                    y : 100 + 200 * j,
                    radius : 100,
                    fill : '#cc6'
                });
                
                myCircle.animate({
                    to : {
                        fill : '#' + Math.floor(Math.random() * 16777215).toString(16)
                    },
                    duration : Math.floor(Math.random() * (100 - 20000 + 1) + 20000)
                });


                // Add a mouseup listener to the sprite
                myCircle.addListener('mouseup', function() {
                    myCircle.setAttributes({
                        fill : '#' + Math.floor(Math.random() * 16777215).toString(16)
                    }, true);


                    myCircle.stopAnimation();


                    myCircle.animate({
                        to : {
                            x : Math.floor(Math.random() * (100 - 500 + 1) + 500),
                            y : Math.floor(Math.random() * (100 - 700 + 1) + 700),
                        },


                        duration : 5000
                    });
                });
            }
}