Html 如何在自定义视图类中创建圆？

我试图在自定义视图类中使用Sencha的Ext.draw.Component绘制一个圆，但它没有显示任何圆。我已粘贴代码以供参考

我还试图在我的主类中定义component类型的变量，但在这样做时，编译器给出了一个错误，表示类型组件未知

//主类

Ext.define('GS0.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.Carousel',
        'Ext.Container',
        'Ext.draw.Component',
        'Ext.Img'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                iconCls: 'home',
                xtype: 'carousel',
                ui     : 'dark',
                direction: 'horizontal',

                items: [
                    {
                        xtype: 'draw',
                        type: 'circle',
                        radius: 50,
                        x: 100,
                        y: 100,
                        fill: '#2d2d2d'
                    },
                    {
                        xtype: 'img',
                        src: 'images/nm.jpg'
                    }
                ]
            }
        ]
    }
});


// Circle Class
Ext.define('GS0.view.CC', {
    extend: 'Ext.draw.Component',
    xtype: 'cc',

    config: {
        type: 'circle',
        cx: 100,
        cy: 100,
        r: 25,
        fillStyle: 'blue'
    }
});

---

尝试在GSO.view.Main中修改项目

items: [{
    iconCls: 'home',
    xtype: 'carousel',
    ui     : 'dark',
    direction: 'horizontal',
    items: [{
        xtype: 'draw',
        items:[{
            type: 'circle',
            fill: '#79BB3F',
            radius: 100,
            x: 100,
            y: 100
        }]
    },{
        xtype: 'img',
        src: 'images/nm.jpg'
    }]
}]

---

圆圈代码应作为一项添加到xtype=draw块。

我认为我加载Main的方式有问题。这是代码。你能发现任何错误吗。PS请参见行Ext.viewport.add（Ext.create（GS0.view.main））

Ext.Loader.setPath({
“Ext”：“touch/src”，
“GS0”：“应用程序”
});
//
外部应用程序({
名称：“GS0”，
要求：[
“Ext.MessageBox”
],
观点：[
“主要的”
],
图标：{
“57”：“resources/icons/Icon.png”，
'72'：'resources/icons/Icon~ipad.png'，
“114”：“资源/图标”/Icon@2x.png',
“144”：“资源/图标/图标”~ipad@2x.png'
},
isIconPrecomposed：正确，
startupImage：{
“320x460”：“resources/startup/320x460.jpg”，
“640x920”：“resources/startup/640x920.png”，
“768x1004”：“resources/startup/768x1004.png”，
“748x1024”：“resources/startup/748x1024.png”，
“1536x2008”：“resources/startup/1536x2008.png”，
'1496x2048'：'resources/startup/1496x2048.png'
},
启动：函数（）{
//销毁#appLoadingIndicator元素
Ext.fly（'appLoadingIndicator'）.destroy（）；
//初始化主视图
add（Ext.create（'GS0.view.Main'）；
},
未更新：函数（）{
Ext.Msg.confirm(
“应用程序更新”，
“此应用程序刚刚成功更新为最新版本。是否立即重新加载？”，
功能（按钮）{
如果（buttonId==“是”）{
window.location.reload（）；
}
}
);
}
});

Anh我这样做了，但它向我显示了以下错误：未捕获类型错误：在instanceof check中需要一个函数，但在surface.jsHmm中得到了#其他原因可能会导致此问题。这里是一个小提琴的工作示例，小提琴是完美的，但仍然无法运行。顺便说一句，你用的是哪一个sencha版本？感觉这是版本问题。我使用的是sencha 2.2.1开源版本。Circle.js位于draw包的Sprite文件夹中。我试图完全按照你在fiddle中所做的做，但仍然无法做到。真的对可能的解决方案感到困惑。Ext.draw.Component的源文件是否在Sencha Touch文件夹中？我认为你必须下载并手动添加它

Ext.Loader.setPath({
    'Ext': 'touch/src',
    'GS0': 'app'
});
//</debug>

Ext.application({
    name: 'GS0',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
        'Main'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('GS0.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});