PDA

View Full Version : [FIXED] Sencha Charts - Cannot Add Charts In Certain Scenarios



GrantClements
21 May 2014, 5:20 AM
If you try adding a Sencha chart to a component after initial creation of the chart, you get the following error:
Unable to get property 'getSize' of undefined or null reference

This occurs before the add call. The add call seems to complete successfully but nothing is actually rendered to the page.

Below is ExtJS4 code which works as expected and the ExtJS5 code equivalent which doesn't.

Working ExtJS 4 Code (also found here: http://jsfiddle.net/n8nH7/)


Ext.onReady(function(){
var wnd = Ext.create('Ext.window.Window', {
title: 'Test',
height: 200,
width: 300,
resizable: true,
shadow: false,
layout: 'fit',
renderTo: Ext.getBody()
});

var chart = Ext.create('Ext.chart.Chart', {
store: {
fields: ['name', 'value'],
data: [
{ name: 'metric one', value: 10 },
{ name: 'metric two', value: 7 },
{ name: 'metric three', value: 5 },
{ name: 'metric four', value: 2 },
{ name: 'metric five', value: 27 }
]
},
series: [{
type: 'column',
xField: 'name',
yField: 'value',
style: {
maxBarWidth: 50
}
}],
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
label: {
rotate: {
degrees: -30
}
}
},
{
type: 'category',
position: 'bottom'
}
]
});

setTimeout(function(){
wnd.add(chart);
}, 5000);


wnd.show();
});



Not-Working ExtJS 5 Code

Ext.onReady(function(){
var wnd = Ext.create('Ext.window.Window', {
title: 'Test',
height: 700,
width: 800,
resizable: true,
layout: 'fit',
renderTo: Ext.getBody()
});

var chart = Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['name', 'value'],
data: [
{ name: 'metric one', value: 10 },
{ name: 'metric two', value: 7 },
{ name: 'metric three', value: 5 },
{ name: 'metric four', value: 2 },
{ name: 'metric five', value: 27 }
]
},
series: {
type: 'bar',
xField: 'name',
yField: 'value',
style: {
maxBarWidth: 50
}
},
axes: [
{
type: 'numeric',
position: 'left',
grid: true,
label: {
rotate: {
degrees: -30
}
}
},
{
type: 'category',
position: 'bottom'
}
]
});


setTimeout(function(){
wnd.add(chart);
}, 3000);


wnd.show();
});

mitchellsimoens
21 May 2014, 8:10 AM
Believe you've run into this bug reported here: http://www.sencha.com/forum/showthread.php?285197