ExtJs 5.1.0 - Unrecognized class name / alias: widget.cartesian

Question

I want to show a chart by region in a new window. The environment is ExtJs Webdesktop. When I create a window through: Ext.create ('Desktop.displayPresences.view.displayPresencesChart'). Show ()

I always get these error messages:

mypath/desktop/widget/cartesian.js?_dc=1423082524533 404 (Not Found) Error: [Ext.create] Unrecognized class name / alias: widget.cartesian 

I researched a lot, but so far I could not solve the problem. What I've done:

Added this in app.json

 "requires": [ "ext-charts" ], 

Through sencha cmd I tried these commands

 sencha app build sencha app refresh sencha app watch 

In the google develeopers tools on the sources tab, I see that the necessary file "Ext.chart.series.Cartesian" is loaded. It is located in the packages / ext-charts / src / chart / series folder.

This is my code.

 Ext.define('Desktop.displayPresences.view.displayPresencesChart', { extend: 'Ext.Window', requires: [ 'Ext.chart.*', 'Ext.data.JsonStore' ], xtype: 'area-stacked', width: 650, initComponent: function() { var me = this; this.myDataStore = Ext.create('Ext.data.JsonStore', { fields: ['month', 'data1', 'data2', 'data3', 'data4' ], data: [ { month: 'Jan', data1: 20, data2: 37, data3: 35, data4: 4 }, { month: 'Feb', data1: 20, data2: 37, data3: 36, data4: 5 }, { month: 'Mar', data1: 19, data2: 36, data3: 37, data4: 4 }, { month: 'Apr', data1: 18, data2: 36, data3: 38, data4: 5 }, { month: 'May', data1: 18, data2: 35, data3: 39, data4: 4 }, { month: 'Jun', data1: 17, data2: 34, data3: 42, data4: 4 }, { month: 'Jul', data1: 16, data2: 34, data3: 43, data4: 4 }, { month: 'Aug', data1: 16, data2: 33, data3: 44, data4: 4 }, { month: 'Sep', data1: 16, data2: 32, data3: 44, data4: 4 }, { month: 'Oct', data1: 16, data2: 32, data3: 45, data4: 4 }, { month: 'Nov', data1: 15, data2: 31, data3: 46, data4: 4 }, { month: 'Dec', data1: 15, data2: 31, data3: 47, data4: 4 } ] }); me.items = [{ xtype: 'cartesian', width: '100%', height: 500, legend: { docked: 'bottom' }, store: this.myDataStore, insetPadding: 40, sprites: [{ type: 'text', text: 'Area Charts - Stacked Area', font: '22px Helvetica', width: 100, height: 30, x: 40, // the sprite x position y: 20 // the sprite y position }, { type: 'text', text: 'Data: Browser Stats 2012', font: '10px Helvetica', x: 12, y: 430 }, { type: 'text', text: 'Source: http://www.w3schools.com/', font: '10px Helvetica', x: 12, y: 440 }], axes: [{ type: 'numeric', fields: 'data1', position: 'left', grid: true, minimum: 0, renderer: function (v) { return v.toFixed(v < 10 ? 1: 0) + '%'; } }, { type: 'category', fields: 'month', position: 'bottom', grid: true, label: { rotate: { degrees: -45 } } }], series: [{ type: 'area', axis: 'left', title: [ 'IE', 'Firefox', 'Chrome', 'Safari' ], xField: 'month', yField: [ 'data1', 'data2', 'data3', 'data4' ], style: { opacity: 0.80 }, highlight: { fillStyle: '#000', lineWidth: 2, strokeStyle: '#fff' }, tooltip: { trackMouse: true, style: 'background: #fff', renderer: function(storeItem, item) { var browser = item.series.getTitle()[Ext.Array.indexOf(item.series.getYField(), item.field)]; this.setHtml(browser + ' for ' + storeItem.get('month') + ': ' + storeItem.get(item.field) + '%'); } } }] }]; this.callParent(); } }); 

I don’t know why in this place I search: "cartesian" xtype: mypath / desktop / widget / cartesian.js?

Usually you need an alias xtype, but when I check Ext.chart.series.Cartesian, is there no alias defined? So I tried to identify one myself. But then I got the message: Uncaught TypeError: undefined is not a function.

Any ideas how to fix this?

This is my file structure in developer tools:

Best wishes

Answer 1

I could solve this, my entry in app.json was wrong. If you want to use Cartesian as xtype, you need to use the new "sencha-charts", "ext-charts" was from the old version of ExtJs.

In addition, I install "Ext.chart.Cartesian" as a direct requirement.

Answer 2

If you look more at Ext.chart.series.Cartesian and its parent Ext.chart.series.Series , you will see that they are not widgets, that is, they are not descendants of Ext.component.Component . This explains the lack of xtype.

Widget having xtype 'cartesian', Ext.chart.Cartesian .

The next part of the answer is why you do not see this. You downloaded the package correctly using app.json , and I would suggest that Ext.chart.Cartesian loads correctly with your template (I do not use it personally). So, from this perspective, I'm at a standstill - the only thing I can offer is to check the dev tools to make sure the Cartesian map is loaded, and possibly resetting the wildcard requires an explicit list of the desired classes.