ExtJs 5.1.0 - 无法识别 class 名称/别名：widget.cartesian

Question

我想在新 window 中显示堆积面积图。环境是 ExtJs Webdesktop。当我通过以下方式创建 window 时： Ext.create('Desktop.displayPresences.view.displayPresencesChart').show()

我总是收到这些错误消息：

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

我研究了很多，还是没能解决问题。我做了什么：

将此添加到 app.json

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

通过 sencha cmd 我尝试了这些命令

sencha app build
sencha app refresh
sencha app watch

在源选项卡的 google develeopers 工具中，我可以看到加载了必要的文件 'Ext.chart.series.Cartesian'。它位于 packages/ext-charts/src/chart/series 文件夹中。

这是我的代码

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();
    }
});

我不知道为什么 xtype: 'cartesian' 在这个位置搜索 (mypath/desktop/widget/cartesian.js)?

通常你需要一个 xtype 一个别名，但是当我检查 Ext.chart.series.Cartesian 时没有定义别名？所以我试着自己定义一个。但后来我收到消息：Uncaught TypeError: undefined is not a function.

有什么解决办法吗？

这是我在开发者工具中的文件结构：

此致

Answer 1

如果您仔细查看 Ext.chart.series.Cartesian 及其父项 Ext.chart.series.Series，您会发现它们不是小部件 - 也就是说，它们不是 Ext.component.Component 的后代。这解释了缺少 xtype 的原因。

xtype 为 'cartesian' 的小部件是 Ext.chart.Cartesian。

答案的下一部分是您看不到的原因。你已经通过 app.json 正确加载了包，我假设你的通配符要求正确加载了 Ext.chart.Cartesian （我个人不使用那些）。所以在这方面，我很困惑——我唯一可以建议的是检查开发工具以确保加载笛卡尔图表，并且可能删除通配符需要所需类的显式列表。

Answer 2

我可以解决，我在app.json中的输入是错误的。如果你想使用笛卡尔作为 xtype，你必须使用新的 'sencha-charts'，'ext-charts' 来自旧的 ExtJs 版本。

此外，我将 'Ext.chart.Cartesian' 设置为直接要求。

ExtJs 5.1.0 - 无法识别 class 名称/别名：widget.cartesian

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

javascript

charts

extjs5