ExtJS4: stop event bubbling with Ext.draw

I'm having some difficulties with event bubbling with ExtJS4 and its drawing components:

drawComponent.on('click', function(){
    var sprite = Ext.create('Ext.draw.Sprite', {
        type: 'circle',
        fill: '#79BB3F',
        stroke: '#000000',
        'stroke-width': 1,
        radius: 100,
        x: 100,
        y: 100,
        surface: this.surface,
        listeners: {
            'click': function(el,e){
                console.log('clicked');
                e.stopPropagation();
            }
        }
    });
    sprite.show(true);
});

When clicking the drawComponent, a circle is drawn. When clicking the circle, this should only trigger the clickHandler of the circle, not 开发者_JS百科the drawComponent.

Any idea what could be wrong with my code? e.stopPropagation() should stop the event bubble.

Thanks, Chielus

Use the addManagedListeners method rather than the listeners property to add the click event.

The click event on the component should be removed as well.

References

• Ext.draw.Sprite