extjs - Sencha Touch：Ext.draw.Component 根本不工作

Question

我正在尝试使用 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);
    }

});

我对此感到非常困惑，觉得非常不愉快。任何帮助表示赞赏，谢谢。

Answer 1

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

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

这是小提琴的链接。

Answer 2

Booking.view.drawComponent不具备surface属性。因此调用该add方法Booking.view.drawComponent.surface会引发错误。

在此处查看工作演示