PDA

View Full Version : ExtJS Chart in MVC



molgun
19 May 2013, 4:57 AM
Ext version tested:

Ext 4.2
Browser versions tested against:

Chrome 26 (Windows)
Description:

Ext.chart.Chart - in MVC doesnt affect
Steps to reproduce the problem:

Create a MVC model for ExtJS Chart
The result that was expected:

The tab should be appeared
The result that occurs instead:

Uncaught TypeError: Cannot read property 'data' of null.
Test Case:
Model

Ext.define('HH.model.SalesChart', {
extend: 'Ext.data.Model',
fields: ['temperature', {name: 'date',type: 'date',dateFormat: 'd-m-Y'}]
});

Store

Ext.define('HH.store.SalesChart', {
extend: 'Ext.data.Store',
model: 'HH.model.SalesChart',
data: [
{temperature: 58, date: '13-10-2013'},
{temperature: 63, date: '14-10-2013'},
{temperature: 73, date: '15-10-2013'},
{temperature: 78, date: '16-10-2013'},
{temperature: 81, date: '17-10-2013'}
]
});

View

Ext.define('HH.view.chart.SalesChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.saleschart',
store: 'SalesChart',
axes: [
{
title: 'Temperature',
type: 'Numeric',
position: 'left',
fields: ['temperature'],
minimum: 0,
maximum: 100
},
{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd M'
}
],
series: [
{
type: 'line',
xField: 'date',
yField: 'temperature'
}
],
initComponent: function() {


this.callParent(arguments);
}
});

Controller

Ext.define('HH.controller.Charts', {
extend: 'Ext.app.Controller',
views: ['center.Dashboard'],
store:['SalesChart'],
model:['SalesChart'],
refs: [
{
ref: 'dashboardPanel',
selector: 'dashboard-panel'
}
],
init: function() {
console.log('charts controller init()');
}
});

slemmon
21 May 2013, 1:03 PM
What if you did 'stores' instead of 'store' and 'models' instead of 'model' in your controller?

molgun
21 May 2013, 11:26 PM
Yes it's my silly mistake. Thank you for your reply.