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

Answer 1

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.

Answer 2

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

The widget that has the xtype of 'cartesian' is Ext.chart.Cartesian.

The next part of the answer is why you can't see that. You've got the package loaded via app.json correctly, and I would assume that the Ext.chart.Cartesian is being loaded correctly by your wildcard requires (I don't use those, personally). So on that part, I'm stumped - the only thing I can suggest is checking in the dev tools to make sure the Cartesian chart is loaded, and possibly dropping the wildcard requires for an explicit list of the desired classes.