Extjs 选项卡面板内的Sencha触摸图

您好，我尝试在选项卡面板中创建Sencha触摸图，但出现以下错误。它作为一个单独的应用程序工作，但当包含在myapp中时，它会失败

 Cannot create an instance of unrecognized alias: widget.piechart 

我的选项卡面板代码

{  title: 'User',
                // html: '<span class="action">User tapped User</span>',
               // cls: 'card',
                iconCls: 'user',
                xtype:'tabpanel',
               tabBar: {
                   dock: 'top',
               layout: 'fit',
               },
               fullscreen: true,
                items: [{

        xtype: 'piechart',
        animate: true,
        width:600,
        height:600,
        title: 'Pie Chart',
        store: 'SampleStore',
        themeCls: 'pie1',
        theme: 'Demo',
        shadow: false,
        insetPadding: 20,
        legend: {
            position: 'left'
        },
        interactions: [
            {
                type: 'reset',
                confirm: true
            },
            {
                type: 'rotate'
            },
            'itemhighlight',
            {
                type: 'iteminfo',
                gesture: 'longpress',
                listeners: {
                    show: function (interaction, item, panel) {
                        var storeItem = item.storeItem;
                        panel.setHtml(['<ul><li><b>Movie: </b>' + storeItem.get('name') + '</li>', '<li><b>Fans: </b> ' + storeItem.get('fans') + '</li></ul>'].join(''));
                    }
                }
            }
        ],
        series: [
            {
                type: 'pie',
                field: 'fans',
                showInLegend: true,
                highlight: false,
                listeners: {
                    'labelOverflow': function (label, item) {
                        item.useCallout = true;
                    }
                },
                // Example to return as soon as styling arrives for callouts
                callouts: {
                    renderer: function (callout, storeItem) {
                        callout.label.setAttributes({
                            text: storeItem.get('name')
                        }, true);
                    },
                    filter: function () {
                        return false;
                    },
                    box: {
                        //no config here.
                    },
                    lines: {
                        'stroke-width': 2,
                        offsetFromViz: 20
                    },
                    label: {
                        font: 'italic 14px Arial'
                    },
                    styles: {
                        font: '14px Arial'
                    }
                },
                label: {
                    field: 'name'
                }
            }
        ]
    }]
                }

{标题：“用户”，
//html:'用户点击用户'，
//cls:“卡”，
iconCls:'用户'，
xtype:'tabpanel'，
选项卡栏：{
码头：“顶部”，
布局：“适合”，
},
全屏：对，
项目：[{
xtype:“piechart”，
动画：对，
宽度：600，
身高：600，
标题：“饼图”，
商店：“SampleStore”，
主题是：“pie1”，
主题：“演示”，
影子：错，
插入：20，
图例：{
位置：'左'
},
互动：[
{
键入：“重置”，
确认：正确
},
{
键入：“旋转”
},
“项目突出显示”，
{
键入：“iteminfo”，
手势：“长按”，
听众：{
显示：功能（交互、项目、面板）{
var storeItem=item.storeItem；
panel.setHtml（['
电影：'+storeItem.get（'name'）+'
'，'
粉丝：'+storeItem.get（'Fans'）+'
']）。加入（''）；
}
}
}
],
系列：[
{
键入“pie”，
现场：“球迷”，
showInLegend：是的，
推荐理由：错，
听众：{
“labelOverflow”：函数（标签、项）{
item.useCallout=true；
}
},
//详图索引的样式一到即返回的示例
标注：{
渲染器：函数（详图索引、storeItem）{
callout.label.setAttributes({
文本：storeItem.get（'name'））
}，对）；
},
过滤器：函数（）{
返回false；
},
方框：{
//这里没有配置。
},
线路：{
“笔划宽度”：2，
抵销额：20
},
标签：{
字体：“italic 14px Arial”
},
风格：{
字体：“14px Arial”
}
},
标签：{
字段：“名称”
}
}
]
}]
}

使用MVC应用程序时，如何在面板中添加图表

xtype: 'piechart' 

到

并且添加需要在视图中配置

 requires: [
          'Ext.chart.series.Pie'
 ]

 requires: [
          'Ext.chart.series.Pie'
 ]