Question

I’ve been digging my mind all this morning to find the solution to this, I have an Extjs window where I want to put a chart as an item. I’m using Extjs 4, here’s my window :

Ext.define('Metrics.view.ChartWin', {   
extend: ['Ext.window.Window'],  
alias: 'widget.chartwin',   
requires :['Ext.chart.*','Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox', 'Metrics.view.DrawChart'],
    width: 800,
    height: 600,
    minHeight: 400,
    minWidth: 550,
    hidden: false,
    shadow: false,
    maximizable: true,
    title: 'Area Chart',
    renderTo: Ext.getBody(),
    layout: 'fit',
    tbar: [{
        text: 'Save Chart',
        handler: function() {
            Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                if(choice == 'yes'){
                    chart.save({
                        type: 'image/png'
                    });
                }
            });
        }
    }],
    items:[{
                    //I guess the problem comes from here??
        xtype : 'drawchart'
    }]
    });

My chart :

Ext.define('Metrics.view.DrawChart', {   
extend: 'Ext.chart.Chart',  
alias: 'widget.drawchart',   
requires: ['Ext.chart.*'],
renderTo: Ext.getBody(),
width: 700,
height: 600,
animate: true,
store:  'GraphData',
shadow : true,
legend: {
            position: 'right'
        },
axes: [
    {
        title: 'Week',
        type: 'Numeric',
        position: 'left',
        fields: ['Week'],
    grid : true

    },
    {
        title: 'In Out Backlog',
        type: 'Numeric',
        position: 'bottom',
        fields: ['BL1 Alt']

    }
],

theme: 'Red',


series: [
 {
 //BLA BLA BLA    
 }]
 }); 

My chart works fine. Now please tell me, how do I add this chart to my window ? I get this error message :

 Cannot read property 'isInstance' of undefined 

Thank you.

Answer 1

Remove

renderTo: Ext.getBody()

from your chart definition. The Chart should be rendered in the window.
Then instantiate a window and set the chart as an item there:

Ext.create('Ext.window.Window', {
...
items: [{
    xtype: 'drawchart'
}]
...

Look at the code here: http://jsfiddle.net/AMx6r/1282/