在面板的边框布局中按 xtype 添加项 - 未捕获的类型错误: item.onAdd 不是一个函数

Question

我正在使用边框布局，我想在中心区域显示图表(以及网格上的图表(，但是，当我尝试将项目(通过xtype(添加到区域"中心"中的项目时，我收到以下错误："未捕获的类型错误：item.onAdd不是一个函数"。您可以看到下面的代码。

Ext.define('Class file name...', {
extend: 'Ext.panel.Panel',
xtype: 'main-xtype',
controller: 'alias-for-controller',
viewModel: 'alias-for-viewmodel',
title: 'Main Title',
layout: 'border',
scrollable: true,
bodyPadding: 10,
bodyBorder: false,
items: [{
region: 'north',
height: '100',
tbar: [{
xtype: 'combobox',
emptyText: 'Select an Option',
width: 200
}, '->', {
xtype: 'button',
iconCls: 'x-fa fa-refresh'
}]
}, {
title: 'West Title',
region: 'west',
collapsible: true,
floatable: false,
width: '300',
minWidth: 250,
maxWidth: 350,
items: [{
xtype: 'displayfield',
fieldLabel: 'DF1'
}, {
xtype: 'displayfield',
fieldLabel: 'DF2'
}, {
xtype: 'displayfield',
fieldLabel: 'DF3'
}]
}, {
title: 'Center Title',
region: 'center',
// here is where the problem starts
items: [{
xtype: 'xtype-to-chart'
}]
},  {
title: 'South Title',
html: '<p>South Title</p>',
region: 'south',
height: '300',
minHeight: '250',
maxHeight: '350'
}]  });

编辑：好的，我尝试做一个网格，这没有问题，所以我现在认为它与我最初试图放在那里的图表有关。以下是图表的代码：

Ext.define('Class name...', {
extend: 'Ext.chart.series.Bar',
xtype: 'xtype-to-chart',
requires: [
],
width: 600,
height: 300,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10
}, {
name: 'metric two',
value: 7
}, {
name: 'metric three',
value: 5
}, {
name: 'metric four',
value: 2
}, {
name: 'metric five',
value: 27
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Value',
fontSize: 15
},
fields: 'value',
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Name',
fontSize: 15
},
fields: 'name'
}],
series: {
type: 'bar',
subStyle: {
fill: ['#388FAD'],
stroke: '#db250b'
},
xField: 'name',
yField: 'value'
}});

Answer 1

您的图表类正在扩展一个系列，而不是一个图表。您需要扩展Ext.chart.CartesianChart。