Adding item by xtype in a border layout on a panel - Uncaught TypeError: item.onAdded is not a function

Question

我正在使用边框布局，我想在中心区域显示图表（并进一步显示在网格上），但是，当我尝试将项目（按 xtype）添加到位于区域 'center'，我收到以下错误："Uncaught TypeError: item.onAdded is not a function"。你可以看下面的代码。

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

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

Adding item by xtype in a border layout on a panel - Uncaught TypeError: item.onAdded is not a function

Adding item by xtype in a border layout on a panel - Uncaught TypeError: item.onAdded is not a function

extjs

extjs6

extjs6-classic