REQUIRED INFORMATION


Ext version tested:
  • Ext 4.0.2a

Browser versions tested against:
  • Chrome 12

Description:
  • I have a chart inside of a hidden panel. If I never show the hidden panel and try to remove it, I get a JS error that this.surface is undefined.

Steps to reproduce the problem:
The result that was expected:
  • For there not to be a JS error.

The result that occurs instead:
  • There was a JS error.

Test Case:

First go to the Column Chart example with debugging enabled, then run the code below, which is adapted from the example on that page:
PHP Code:
Ext.onReady(function () {
    var 
win Ext.create('Ext.Window', {
        
width800,
        
height300,
        
hiddenfalse,
        
maximizabletrue,
        
title'Column Chart',
        
renderToExt.getBody(),
        
layout'fit',
        
tbar: [{
            
text'Reload Data',
            
handler: function () {
                
store1.loadData(generateData());
            }
        }, {
            
text'Remove All',
            
handler: function () {
                
win.removeAll();
            }
        }],
        
items: [{
            
xtype'panel',
            
layout'fit',
            
hiddentrue,
            
items: [{
                
id'chartCmp',
                
xtype'chart',
                
style'background:#fff',
                
animatetrue,
                
shadowtrue,
                
storestore1,
                
axes: [{
                    
type'Numeric',
                    
position'left',
                    
fields: ['data1'],
                    
label: {
                        
rendererExt.util.Format.numberRenderer('0,0')
                    },
                    
title'Number of Hits',
                    
gridtrue,
                    
minimum0
                
}, {
                    
type'Category',
                    
position'bottom',
                    
fields: ['name'],
                    
title'Month of the Year'
                
}],
                
series: [{
                    
type'column',
                    
axis'left',
                    
highlighttrue,
                    
tips: {
                        
trackMousetrue,
                        
width140,
                        
height28,
                        
renderer: function (storeItemitem) {
                            
this.setTitle(storeItem.get('name') + ': ' storeItem.get('data1') + ' $');
                        }
                    },
                    
label: {
                        
display'insideEnd',
                        
'text-anchor''middle',
                        
field'data1',
                        
rendererExt.util.Format.numberRenderer('0'),
                        
orientation'vertical',
                        
color'#333'
                    
},
                    
xField'name',
                    
yField'data1'
                
}]
            }]
        }]
    });
}); 



HELPFUL INFORMATION

Possible fix:
  • The definition of Ext.chart.Chart.prototype.destroy just needs to check if it's been rendered or if this.surface exists before trying to destroy it.
    PHP Code:
        destroy: function() {
            if(
    this.surface) { // Could also be if(this.rendered)
                
    this.surface.destroy();
            }
            
    this.bindStore(null);
            
    this.callParent(arguments);
        }