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

Question

I want to show a stacked area chart in a new window. The enviroment is the ExtJs Webdesktop. When I create the 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 couldn't solve the problem yet. What I've done:

Added this to 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 in the sources tab I can see that the necessary file 'Ext.chart.series.Cartesian' is loaded. It is 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 the xtype: 'cartesian' is searching at this location (mypath/desktop/widget/cartesian.js)?

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

Any ideas how to fix this?

This is my file structure in the developer tools:

Best regards

Solution

I could solve it, my entry in app.json was wrong. If you want to use the cartesian as a xtype you have to use the new 'sencha-charts', 'ext-charts' was from the old ExtJs Version.

Additionally I set 'Ext.chart.Cartesian' as a direct require.

Comments

[Timon]

I also tried to load it explicit, still the same result. Normally I don't use wildcards but I wanted to be sure that everything is loaded. In the dev tools I see that the file is loaded but it's just directing to the wrong path.

[Eluny]

for ExtJS 6.2.0 - 'charts' like commented right above in app.json. Checked for sencha-charts - not working. But it's easy to choose, when you know where to look, thanks!

[Mahi]

@Robert, getting same error for ExtReact 7. Can u help