javascript - ExtJs 5.1.0 - Unrecognized class namealias: widget.cartesian - Stack Overflow

admin 管理员组

文章数量: 1086019

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 mands

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: /',
                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

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 mands

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./',
                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

• javascript
• charts
• extjs5

Share Improve this question Follow edited Apr 9, 2015 at 18:22 Mr. Polywhirl 48.9k1212 gold badges9393 silver badges144144 bronze badges asked Feb 4, 2015 at 21:00 TimonTimon 14911 gold badge33 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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.ponent.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.

本文标签： javascriptExtJs 510Unrecognized class namealias widgetcartesianStack Overflow