Question

我想在新窗口中显示堆积区域图表。环境是ExtJs Webdesktop。当我创建窗口时： Ext.create（ 'Desktop.displayPresences.view.displayPresencesChart'）。显示（）

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

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不是函数。

任何想法如何解决这个问题？

这是开发人员工具中的文件结构：

祝你好运

Answer 1

我可以解决它，我在app.json中的条目是错误的。如果你想将笛卡尔用作xtype，你必须使用新的＆＃39; sencha-charts＆＃39;，＆＃39; ext-charts＆＃39;来自旧的ExtJs版本。

此外，我设置了Ext.chart.Cartesian＆＃39;作为直接要求。

Answer 2

如果您更多地关注Ext.chart.series.Cartesian及其父Ext.chart.series.Series，您会发现它们不是小部件 - 也就是说，它们不是Ext.component.Component的后代。这解释了缺少xtype。

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

答案的下一部分是为什么你看不到。你已经正确地通过app.json加载了包，我认为你的通配符需要正确加载Ext.chart.Cartesian（我个人不会使用它们）。所以在那一部分，我很难过 - 我唯一可以建议的是检查开发工具以确保加载笛卡尔图表，并且可能删除通配符需要明确的所需类列表。

ExtJs 5.1.0 - 无法识别的类名/别名：widget.cartesian

2 个答案: