adding item to window Extjs 4

[skylinezpromise]

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:[{
                 
            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
       }]
});

My chart works fine. Now please tell me, how do I add this chart to my window ? I get this error message :
Uncaught TypeError: Cannot read property 'isInstance' of undefined

Thank you.

[scottmartin]

Where are you creating/showing the instance of your window?
var chartWindow = Ext.widget('chartwin');

You use of xtype for your chart should be fine.

Scott.

[skylinezpromise]

In my controller, exactly in the handler of my button :

launchChart : function(button){
console.log('before create');
var chartwin = Ext.widget('chartwin');
console.log('after create');
chartwin.show();
}

It didn't work, i'm getting : Cannot call method 'substring' of undefined

[skylinezpromise]

please somebody help me find the error in my code

[scottmartin]

Cannot call method 'substring' of undefined

This usually means you are trying to create a type that does not exist (xtype, etc)
Make sure you have all your requires needed to create class.

Check your console.

[skylinezpromise]

Actually I have a viewport where I put all my views in, it looks like this :

Ext.define('Metrics.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
    
    requires: [
        'Metrics.view.Params',
        'Metrics.view.DrawChart',
	'Metrics.view.ParamsBtn',
	'Metrics.view.ChartWin'
    ],
    
    initComponent: function() {
        this.items = {
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                height: 80,
                items: [{
                    xtype: 'component',
                    html: '<font size="6"><b>Metrics</b><br><b>Alcatel Lucent</b></font>'
				
                }]
            }],
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [{
                width: 350,
                xtype: 'panel',
                id: 'west-region',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'params',
					align : 'center'
                    
                }, {
                    
                    xtype: 'paramsbtn',
					height: 250,
					align : 'stretch'
                }]
            }, {
               xtype: 'panel',
                items: [{
               
                }]
            }]
        };
		//this.add('chartwin');
		
        
        this.callParent();
    }
});

But adding those views in my "requires" just means that I'll have to add them somewhere with xtype right ? Since I don't need to add my window to my viewport, I don't have to put "Metrics.View.WinChart" in the "requires". But when I don't, my controller doesn't recognize WinChart anymore so i'm trapped in this circle whether i put "WinChart" in the "requires" or not, I still get the same error...

[scottmartin]

If you want to access the chart, then you will need to include it. Are you sure your defines/aliases are setup correctly for each xtype you call? It could be simple as a camel case issue.

You can also use ext-dev.js (instead of ext.js) and check the console for warnings about missing files.

You chartwin should have the requires for your chart.

Since we are only getting snippets, it would be hard to tell.

Scott.