Extjs Sencha Touch:Ext.draw.Component根本不工作

我正在尝试使用Sencha Touch和Ext.draw.Component在屏幕上绘制画布。我什么也没做

这是我的主视图，已设置为初始视图

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

这是我的draw.Component的代码，我正试图用它向屏幕渲染基本形状

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

});

---

我对此深感困惑，觉得很不愉快。非常感谢您的帮助。

Booking.view.drawComponent

不具有

surface

属性。因此，在

Booking.view.drawComponent.surface

上调用

add

方法会引发错误

---

使用getSurface方法而不是Booking.view.drawComponent

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

---

也许你做错了什么？控制台中有错误吗？