我是Ext.js的新手并试图弄清楚基本结构。无论如何,我想在Panel中使用LineChart,但是我收到了这个错误:
**Uncaught Error: [Ext.create] Unrecognized class name / alias: BasicChart**
我从http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#line-basic找到了这段代码。这是LineChart代码:
Ext.define('BasicChart', {
extend: 'Ext.Panel',
xtype: 'basic-line',
requires:[
'Ext.chart.Chart',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category'],
initComponent: function() {
var me = this;
this.myDataStore = Ext.create('Ext.data.JsonStore', {
fields: ['month', 'data1' ],
data: [
{ month: 'Jan', data1: 20 },
{ month: 'Feb', data1: 20 },
{ month: 'Mar', data1: 19 },
{ month: 'Apr', data1: 18 },
{ month: 'May', data1: 18 },
{ month: 'Jun', data1: 17 },
{ month: 'Jul', data1: 16 },
{ month: 'Aug', data1: 16 },
{ month: 'Sep', data1: 16 },
{ month: 'Oct', data1: 16 },
{ month: 'Nov', data1: 15 },
{ month: 'Dec', data1: 15 }
]
});
me.items = [{
xtype: 'chart',
width: '100%',
height: 410,
padding: '10 0 0 0',
style: {
'background' : '#fff'
},
animate: true,
shadow: false,
store: this.myDataStore,
insetPadding: 40,
items: [{
type : 'text',
text : 'Line Charts - Basic Line',
font : '22px Helvetica',
width : 100,
height: 30,
x : 40, //the sprite x position
y : 12 //the sprite y position
}, {
type: 'text',
text: 'Data: Browser Stats 2012',
font: '10px Helvetica',
x: 12,
y: 380
}, {
type: 'text',
text: 'Source: http://www.w3schools.com/',
font: '10px Helvetica',
x: 12,
y: 390
}],
axes: [{
type: 'Numeric',
fields: 'data1',
position: 'left',
grid: true,
minimum: 0,
label: {
renderer: function(v) { return v + '%'; }
}
}, {
type: 'Category',
fields: 'month',
position: 'bottom',
grid: true,
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'line',
axis: 'left',
xField: 'month',
yField: 'data1',
style: {
'stroke-width': 4
},
markerConfig: {
radius: 4
},
highlight: {
fill: '#000',
radius: 5,
'stroke-width': 2,
stroke: '#fff'
},
tips: {
trackMouse: true,
style: 'background: #FFF',
height: 20,
showDelay: 0,
dismissDelay: 0,
hideDelay: 0,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('month') + ': ' + storeItem.get('data1') + '%');
}
}
}]
}];
this.callParent();
}
});
这是我的主类的一部分,它试图在面板中调用这个图表:
{
xtype: 'panel',
width: 1000,
height: 1000,
autoScroll: true,
bodyPadding: 10,
title:'Billing Graphs',
margin: '10 5 0 5',
colspan:2,
items: Ext.create('BasicChart', {
renderTo: Ext.getBody()
})
}
请帮我找一下我做错了什么。希望我能解释清楚。谢谢你的帮助。
答案 0 :(得分:1)
您可以像这样使用xtype
:
{
xtype: 'panel',
width: 1000,
height: 1000,
autoScroll: true,
bodyPadding: 10,
title:'Billing Graphs',
margin: '10 5 0 5',
colspan:2,
items: {
xtype: 'basic-line'
}
}