0
我是Ext.js的新手,想要弄清楚基本結構。無論如何,我想用線型圖在面板內部,但我得到這個錯誤:如何在Panel內調用Ext.Define類?
**Uncaught Error: [Ext.create] Unrecognized class name/alias: BasicChart**
我發現這個代碼http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#line-basic。這裏是線型圖碼:
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()
})
}
請幫我看看我在做什麼它錯了。希望我能解釋得很好。謝謝你的幫助。
我明白了,但如果我使用「基本行」,我怎麼會叫「BasicChart」的一部分?這就是爲什麼我有點困惑。 –
與使用完整的類名相比,'xtype'屬性只是創建對象的較短選擇。請參閱文檔:http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-xtype –
我剛剛得到它。非常感謝您的幫助!但我仍然得到這個錯誤未捕獲的錯誤:[Ext.createByAlias]無法識別的別名:axis.Numeric。你有什麼主意嗎? –