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

Question

您好，我尝试在标签面板中创建 Sencha Touch 图表，但出现以下错误。它作为一个单独的应用程序工作，但是当包含在 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'
                }
            }
        ]
    }]
                }

使用 MVC App 时如何在面板内添加图表

Answer 1

尝试改变

xtype: 'piechart' 

到

 xtype : 'chart'

并在视图中添加需要配置

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