EXTJS 4.0 MVC load a view with chart whose store has inline data
I follow exactly as the MVC example. But I always get error in controller file. Any hint would be appreciated.
Here is my app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
name: 'FSSP',
controllers: [Charts' /*,...*/],
autoCreateViewport: true
});
Here is my Controller code
Ext.define('FSSP.controller.Charts', {
extend: 'Ext.app.Controller',
// Stores to load
stores: ['WeatherPoints'],
models: ['WeatherPoint'],
// Views to load
views: ['center.PieC'],
init: function() {
console.log('charts controller init()');
}
});
Here is my store definition:
Ext.define('FSSP.store.WeatherPoints', {
extend: 'Ext.data.Store',
model: 'WeatherPoint',
data: [
{ temperature: 58, date: new Date(2011, 1, 1, 8) },
{ temperature: 63, date: new Date(2011, 1, 1, 9) },
{ temperature: 73, date: new Date(2011, 1, 1, 10) },
{ temperature: 78, date: new Date(2011, 1, 1, 11) },
{ temperature: 81, date: new Date(2011, 1, 1, 12) }
]
})
Here is my view de开发者_如何学JAVAfinition:
Ext.define('FSSP.view.center.PieC', {
extend: 'Ext.chart.Chart',
alias: 'widget.piec',
requires:['Ext.chart.*'],
renderTo: Ext.getBody(),
width: 400,
height: 300,
store: 'WeatherPoints',
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
groupBy: 'hour',
dateFormat: 'ga'
}
],
theme: 'Green',
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
]
});
I always got following error:
The following classes are not declared even if their files have been loaded: 'FSSP.controller.Charts'. Please check the source code of their corresponding files for possible typos: 'app/controller/Charts.js'
http://mydomain.com/portal/ext-4.0/ext-debug.js Line 8967
精彩评论