javascript ExtJs 5.1.0 - 无法识别的类名/别名：widget.cartesian
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28331338/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJs 5.1.0 - Unrecognized class name / alias: widget.cartesian
提问by Timon
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()
我想在新窗口中显示堆积面积图。环境是 ExtJs Webdesktop。当我通过以下方式创建窗口时： 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
将此添加到 app.json
"requires": [
"ext-charts"
],
Through sencha cmd I tried these commands
通过 sencha cmd 我尝试了这些命令
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.
在源选项卡中的 google develeopers 工具中，我可以看到加载了必要的文件“Ext.chart.series.Cartesian”。它位于packages/ext-charts/src/chart/series 文件夹中。
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)?
我不知道为什么 xtype: 'cartesian' 在这个位置搜索 (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.
通常你需要一个 xtype 一个别名，但是当我检查 Ext.chart.series.Cartesian 时没有定义别名？所以我试图自己定义一个。但后来我刚收到消息：Uncaught TypeError: undefined is not a function。
Any ideas how to fix this?
任何想法如何解决这一问题？
This is my file structure in the developer tools:
这是我在开发人员工具中的文件结构：
Best regards
最好的祝福
采纳答案by Timon
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.
我可以解决它，我在 app.json 中的条目是错误的。如果你想使用笛卡尔作为 xtype，你必须使用新的 'sencha-charts'，'ext-charts' 来自旧的 ExtJs 版本。
Additionally I set 'Ext.chart.Cartesian' as a direct require.
此外，我将“Ext.chart.Cartesian”设置为直接要求。
回答by Robert Watkins
If you look more at the Ext.chart.series.Cartesianand 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.
如果您更多地查看Ext.chart.series.Cartesian及其父Ext.chart.series.Series，您会发现它们不是小部件 - 也就是说，它们不是 的后代Ext.component.Component。这解释了缺少 xtype。
The widget that has the xtype of 'cartesian' is Ext.chart.Cartesian.
具有“笛卡尔”xtype 的小部件是Ext.chart.Cartesian.
The next part of the answer is why you can't see that. You've got the package loaded via app.jsoncorrectly, and I would assume that the Ext.chart.Cartesianis 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.
答案的下一部分是为什么你看不到那个。您已经通过app.json正确加载了包，我假设Ext.chart.Cartesian您的通配符需要正确加载（我个人不使用这些）。所以在这方面，我很难过 - 我唯一能建议的是检查开发工具以确保笛卡尔图表已加载，并且可能删除通配符需要所需类的显式列表。
