Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    tbop is on a distinguished road

      0  

    Question Unanswered: AddListener only

    Unanswered: AddListener only


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

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Answers
    85
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

    Code:
    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.

Thread Participants: 1

Tags for this Thread