パネルの枠線レイアウトにxtypeで項目を追加する - キャッチしないTypeError：item.onAddedが関数ではありません

Question

私は境界線レイアウトを使用していますが、中央の領域にグラフを表示したいしかし、私が領域 'center'にあるアイテムに（xtypeで）アイテムを追加しようとすると、次のエラーが出ます： "捕捉されなかったTypeError：item.onAddedは関数ではありません"。以下のコードを見ることができます。

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' 
}] }); 

EDIT： [OK]を、私は代わりに、グリッドをやってみましたし、それが何の問題も働いていないので、私は今、それは私が最初の場所でそこに置かしようとしていたチャートとに何かを持って考えています。グラフのコードは次のとおりです。

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を拡張する必要があります。