How to add sprites to Ext.Draw.surface after you've created your surface in Ext4

Extjs4 drawComponent.surface.add() not working? try this instead;

paper = Ext.create('Ext.draw.Component', {
    width: 1000,
    height: 900,
    autoShow: true,
    items: [
    {
        type: 'circle',
        fill: '#ccc',
        radius: 50,
        x: 200,
        y: 200
    }],
    renderTo: 'canvas'

});


Ext.define('Test.Control.Event', {
    extend: 'Ext.draw.Sprite',

    constructor: function() {
        this.callParent([{
                type: 'circle',
                fill: '#FCCEED',
                radius: 50,
                x: 100,
                y: 100,
                surface: paper.surface
            }]);

    }
});

var s = paper.surface.add(new Test.Control.Event());

s.show(true);