AddListener only

[tbop]

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

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
                    });
                });
            }
}

[tvanzoelen]

In have no idea what your program is supposed to do, but is it this?

Ext.onReady(function() {

    var drawComponent = Ext.create('Ext.draw.Component', {
        width: 800,
        height: 600,
        renderTo: document.body
    });


    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',
                listeners: {

                    mouseup: {
                    fn: function(){

                            this.setAttributes({ fill: '#' + Math.floor(Math.random() * 16777215).toString(16) }, true);

                            this.stopAnimation();


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

            myCircle.animate({
                to: {
                    fill: '#' + Math.floor(Math.random() * 16777215).toString(16)
                },
                duration: Math.floor(Math.random() * (100 - 20000 + 1) + 20000)
            });

           
        } //for 1
    } //for2

});

Indeed you referenced within your code in mouseup the last component, if the loop is over, mycircle is the last component.

myCircle.animate({ et cetera will be the last object.

so I have put the listener in the config.