Sencha Touch: Ext.draw.Component is not working at all

Question

I'm trying to draw a canvas to the screen using Sencha Touch and Ext.draw.Component. I haven't been able to make anything render whatsoever.

This is my main view, which has been set as the initial view.

Ext.define('Booking.view.panelOne', {
    extend: 'Ext.Panel',
    alias: 'widget.panelOne',
    requires: [
        'Booking.view.drawComponent'
    ],
    config: {
        itemId: 'panelOne',
        ui: 'light',
        layout: {
           type: 'card'
        },
        scrollable: 'horizontal',
        items: [
            {
                xtype: 'drawComponent'
            }
        ]
    }
});

This is the code for my draw.Component, which I'm trying to use to render basic shapes to the screen.

Ext.define('Booking.view.drawComponent', {
    extend: 'Ext.draw.Component',
    alias: 'widget.drawComponent',

    config: {
        docked: 'left',
        height: '100%',
        itemId: 'myComponent',
        width: '100%'
    },

    initialize: function() {
        this.callParent();

        Booking.view.drawComponent.getSurface('main').add({
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }).show(true);

        Booking.view.drawComponent.surface.add({
            type: 'circle',
            fill: '#000',
            radius: 100,
            x: 300,
            y: 300
        }).show(true);
    }

});

I am acutely puzzled by this, and find it to be very unpleasant. Any help is appreciated, thanks.

Answer 1

Use the getSurface method instead of Booking.view.drawComponent

this.getSurface('main').add({
    type: 'circle',
    fill: '#79BB3F',
    radius: 100,
    x: 100,
    y: 100
}).show(true);

Here is a link to th fiddle.