ExtJS draw package and mouse events

Question

I want to be able to draw some geometry on canvas, using ExtJS draw package . But I also want to provide some interactivity, such as moving of a drawn circle or highlighting of geometry when a user clicks on it. But I could not achieve this. For example, this is what I've tried:

Ext.create({
    xtype: 'draw',
    renderTo: document.body,
    width: 600,
    height: 400,
    sprites: [{
       type: 'circle',
       cx: 100,
       cy: 100,
       r: 50,
       fillStyle: '#1F6D91',
       listeners: {
           click: function () {
               alert("click!");
           }
       }
   }]
});

When I click on the circle, nothing happens. So, my question is whether it is possible and if yes, how can we do this?

Answer 1

Two things that you will need to make this work:

1 - The listeners must be added to the draw container and not to the sprite itself. (The events will be spriteclick , spritedblclick , spritetap , spritemousedown , spritemouseup and so on.. check a list here: http://docs.sencha.com/extjs/6.2.0/classic/Ext.draw.Container.html#event-spriteclick ).

2 - You will need to add the Ext.draw.plugin.SpriteEvents to your Draw container so it will be able to listen to SpriteEvents.

Try the code below:

var drawContainer = Ext.create('Ext.draw.Container', {
    plugins: ['spriteevents'],
    renderTo: Ext.getBody(),
    width: 200,
    height: 200,
    sprites: [{
        type: 'circle',
        fillStyle: '#79BB3F',
        r: 50,
        x: 100,
        y: 100
    }],
    listeners: {
        spriteclick: function (item, event) {
            var sprite = item && item.sprite;
            if (sprite) {
                sprite.setAttributes({fillStyle: 'red'});
                sprite.getSurface().renderFrame();
            }
        }
    }
});