[4.0.2a] JS error when removing an unrendered chart

[ZachG]

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:

• Go to the Column Chart example with debug turned on.
• Close the window that pops up, and run the code below.
• When the window opens, click on "Remove All" in the tbar.

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:

Ext.onReady(function () {
    var win = Ext.create('Ext.Window', {
        width: 800,
        height: 300,
        hidden: false,
        maximizable: true,
        title: 'Column Chart',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Reload Data',
            handler: function () {
                store1.loadData(generateData());
            }
        }, {
            text: 'Remove All',
            handler: function () {
                win.removeAll();
            }
        }],
        items: [{
            xtype: 'panel',
            layout: 'fit',
            hidden: true,
            items: [{
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                shadow: true,
                store: store1,
                axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Number of Hits',
                    grid: true,
                    minimum: 0
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                        trackMouse: true,
                        width: 140,
                        height: 28,
                        renderer: function (storeItem, item) {
                            this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' $');
                        }
                    },
                    label: {
                        display: 'insideEnd',
                        'text-anchor': 'middle',
                        field: 'data1',
                        renderer: Ext.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.
  

      destroy: function() {
          if(this.surface) { // Could also be if(this.rendered)
              this.surface.destroy();
          }
          this.bindStore(null);
          this.callParent(arguments);
      }