PDA

View Full Version : Extending chart series with MVC



RuBenKlunZ
17 Jun 2013, 1:28 AM
Hi,

I'm using ExtJs 4.1.3 and I've build my application with the MVC structure. In my application I want to extend the Line series of a chart, so I can set some different properties from the normal Line series.
In my app.js I've set the path to the ux map:

Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: [{
'Ext.ux': './app/ux/'
}]
});

And I have defined the series like this:

Ext.define('Ext.ux.McTargetSeries', {
extend: 'Ext.chart.series.Line',
alias: 'series.mcTarget',
type: 'mcTarget',


style: {
fill: '#111',
opacity: 0.2
}
});

In the definition of my chart the serie is called like this:

Ext.define('MC.view.TargetChart', {
extend: 'Ext.chart.Chart',
// snip

series: [{
type: 'mcTarget',
axis: 'left',
// snip
}]
});

However, when I load my application i keep getting the following error:

Uncaught TypeError: Cannot call method 'substring' of undefined

Anyone know how I kan solve this issue, I would appreciate a MVC solution, since the rest of my application is MVC as well

slemmon
18 Jun 2013, 2:55 PM
I would stay away from using the Ext namespace for your own classes. Try renaming the class to a different namespace and re-point the loader path accordingly and see how you fare.

For example, change the namespace to Common and set your path like 'Common': './Common'
and then drop your Common.ux.McTargetSeries file under Common/ux/McTargetSeries.js

Also, make your alias / type configs all lower-case. If you need to separate parts of the alias use a '-' to keep things readable. Here's an inline example using the extended class to demonstrate feasibility - just need to iron out pathing for the Loader now is all.



var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});




Ext.define('Common.ux.McTargetSeries', {
extend: 'Ext.chart.series.Line',
alias: 'series.mctarget',
type: 'mctarget',




style: {
fill: '#111',
opacity: 0.2
}
});




Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'mctarget',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});

RuBenKlunZ
19 Jun 2013, 11:48 PM
Thanks for the tips!

It seems that problem doesn't lie completely in how I wrote it, but the fact that I want to add the serie dynamically to the chart. Since
Ext.create('Common.ux.McTargetSeries, {
//...
}') gives me this error
Uncaught TypeError: Cannot read property 'surface' of undefined
While another method
chart.series.add({
type: 'mctarget',
//...
}) gives me the previous said error
Uncaught TypeError: Cannot call method 'substring' of undefined
I have to look for another solution, suggestions are welcome as always ;)

RuBenKlunZ
20 Jun 2013, 1:18 AM
Found the answer:

In app.js instead of using

Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: [{
'Common.ux': 'app/ux'
}]
});

You have to set the path apart like this

Ext.Loader.setPath('Common.ux', 'app/ux');

And then require each component in the map like so:

Ext.require('Common.ux.McTargetSeries');

I have no idea why it doesn't get the path when setting him in setConfig(), but this seems to work to add the series to a chart like this:

chart.series.add({
type: 'mctarget',
// ...
})