View Full Version : [FIXED] Cannot create an unrendered chart

6 May 2014, 6:50 PM
It works if it's run in a window external to the dashboard.

Ext.define('SpendingPortal.view.SponsorChart', {
extend: 'Ext.panel.Panel',
alias: 'widget.sponsorchart',

requires: [

autoShow: true,
height: 320,
width: 501,
constrain: true,
layout: {
type: 'fit'
title: 'Compare Expenditures',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'cartesian',
insetPadding: 20,
store: 'ChartData',
insetPadding: {
top: 40,
bottom: 40,
left: 20,
right: 40
interactions: 'itemhighlight',
axes: [

type: 'numeric',
position: 'left',

title: 'Expenditures',
listeners: {
rangechange: function(range) {
var store = this.getChart().getStore(),
min = Infinity,
max = -Infinity,

store.each(function(rec) {
var value = rec.get('value');
if (value > max) {
max = value;
if (value < min) {
min = value;

value = (min + max) / 2;
value: value,
line: {
title: {
text: 'Average Spending: $' + (value / 1000).toFixed() + 'K'
lineDash: [2, 2]

}, {
type: 'category',
title: 'Elected Representative',
position: 'bottom'
series: [{
type: 'bar',
axis: 'left',
xField: 'label',
yField: 'value',
style: {
minGapWidth: 20
highlightCfg: {
strokeStyle: 'black',
fillStyle: '#c1e30d',
lineDash: [5, 3]
label: {
field: 'high',
display: 'insideEnd',
renderer: function(value) {
return value.toFixed(1);
items: {
type: 'text',
text: 'Spending by Reps',
font: '22px Helvetica',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position



6 May 2014, 7:31 PM
When it first throws the exception, what is it pointing to? If the charts works outside the portal, it's probably some sizing issue.

6 May 2014, 7:58 PM
> When it first throws the exception, what is it pointing to?

Not sure what you mean by this? It fails upon instantiation.

You can download the app from https://www.dropbox.com/s/d4w212wyhuq0urf/after4.zip

I believe it has something to do with how the component is getting instantiated into the portal with constrainment. If the component is constrained and added into a layout via container.add(), it blows up with the aforementioned error message.

If, however, the component is instantiated using the following syntax, then it works properly:

// get reference to parent panel / container
Ext.widget('mywindow', {
constrainTo: parentPanel.getEl(),
x: 5,
y: 20

6 May 2014, 8:27 PM
Not sure what you mean by this? It fails upon instantiation.

I was referring to where is the exception thrown, on what line in what file?

Anyway, after looking at the test case I can see for myself. It makes more sense now. The dashboard doesn't have any impact in this case. The problem is that when you're creating the chart object it's not being rendered. It assumes on creation it will be rendered so it schedules a layout. When the layout runs, it fails because it can't find the element.

The work around for now is to use the second form like you have commented out.

6 May 2014, 8:29 PM
Ah, got it...yeah, the line numbers were included in the screenshot. Anyway, glad that you confirmed it as an issue. Got any quick workarounds?