Ajouter un article par xtype dans une mise en page de bordure sur un panneau - Uncaught TypeError: item.onAdded est pas une fonction

Question

J'utilise une disposition de la frontière et je veux afficher un graphique (et plus loin sur une grille) dans la région du centre, mais, lorsque je tente d'ajouter un élément (par xtype) à l'élément qui se trouve dans la région « centre », je reçois l'erreur suivante: « Uncaught TypeError: item.onAdded est pas une fonction ». Vous pouvez voir le code ci-dessous.

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, j'ai essayé de faire une grille à la place et qui a travaillé sans problème, donc je suis maintenant penser qu'il a quelque chose à la carte que je tentais de mettre là en premier lieu . Voici le code du graphique:

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

Votre classe de diagramme étend une série, pas un graphique. Vous devez étendre Ext.chart.CartesianChart.