View Full Version : What is causing my Radial chart to redraw?

14 Jun 2012, 7:10 AM
<edit> wrong forum? Reposted in 4.X discussion. please delete this thread.

I have a grid & a radial chart inside a tabpanel. Both load data & render correctly with no errors. When I double click on a row, it is supposed to open a new tab with data relevant to the row clicked, that works fine as well.

However, I am getting this error, and after using breakpoints, I found out it's the radial chart redrawing and throwing an error:

Uncaught TypeError: Cannot call method 'setAttributes' of undefined ext-all-debug.js:59616
Ext.define.drawAxis ext-all-debug.js:59616
Ext.define.redraw ext-all-debug.js:57809
Ext.define.afterComponentLayout ext-all-debug.js:57750
Ext.define.notifyOwner ext-all-debug.js:42110
Ext.define.callLayout ext-all-debug.js:54801
Ext.define.flushLayouts ext-all-debug.js:54975
Ext.define.runComplete ext-all-debug.js:55506
callOverrideParent ext-all-debug.js:36
Base.implement.callParent ext-all-debug.js:3728
Ext.override.runComplete ext-all-debug.js:44079
Ext.define.run ext-all-debug.js:55487
Ext.define.statics.flushLayouts ext-all-debug.js:44083
Ext.define.statics.resumeLayouts ext-all-debug.js:44090
Ext.resumeLayouts ext-all-debug.js:46118
Ext.define.add ext-all-debug.js:74006
Ext.define.onRankHistoryLoad RankHistory.js:54
fire ext-all-debug.js:8586
Ext.define.continueFireEvent ext-all-debug.js:24623
Ext.define.fireEvent ext-all-debug.js:24601
Ext.define.onProxyLoad ext-all-debug.js:50179
Ext.define.processResponse ext-all-debug.js:39168
(anonymous function) ext-all-debug.js:49523
Ext.apply.callback ext-all-debug.js:6422
Ext.define.onComplete ext-all-debug.js:37300
Ext.define.onStateChange ext-all-debug.js:37251
(anonymous function) ext-all-debug.js:1815

I assume that it is redrawing the chart in case anything is being sized, if I resize my browser, the chart draws correctly. But when adding a new tab, and it's looping thru the sprites[i + j].setAttributes in extjs-all-debug.js, the list of sprites is only 10, instead of 16 when it initially draws, causing it to be out of index and throw the error.

These are the relevant methods in my controller.

* When we double click a row in the details grid, open a new tab showing the history
* of that page & key
detailDoubleClick: function(view, record, item, idx, e) {
params : { key_id : record.get('key_id'),
page_id : record.get('page_id') }
* After the history store is loaded, create a new grid in a new tab and activate it
onRankHistoryLoad: function(store, records) {
console.log('rank history loaded');
var tabs = [],
title = 'Some Title',
tab = Ext.widget('keyrankhistorygrid', {
title: title,
tabTip: title,
closable: true
this.getMyTabPanel().add(tabs); //setAttributes Error thrown here
this.getMyTabPanel().setActiveTab(tab); //Never make it here

22 Jun 2012, 12:10 PM
It would be very difficult to determine the reason for this without a working test case.
This may also help you isolate the problem.


23 Jun 2012, 10:00 AM
See if this fixes it for you

Ext.override(Ext.chart.Chart, {
afterComponentLayout: function(width, height, oldWidth, oldHeight) {
var me = this;
if (Ext.isNumber(width) && Ext.isNumber(height)) {
if (width !== oldWidth || height !== oldHeight) {
me.curWidth = width;
me.curHeight = height;
me.needsRedraw = false;
} else if (me.needsRedraw) {
me.needsRedraw = false;