在面板上的邊框佈局中添加xtype的項目 - 未捕獲的TypeError：item.onAdded不是函數

Question

我正在使用邊框佈局，並且想要在中心區域顯示圖表（並在網格上）但是，當我嘗試將項目（xtype）添加到區域'中心'中的項目時，出現以下錯誤：「Uncaught 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' 
}] }); 

編輯： 好吧，我試圖做一個網格，而不是和已經工作沒有問題，所以現在我想它與我試圖在第一個地方放有圖表的東西。以下是圖表的代碼：

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。