1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    skylinezpromise is on a distinguished road

      0  

    Default adding item to window Extjs 4

    adding item to window Extjs 4


    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 :

    Code:
    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 :

    Code:
    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    skylinezpromise is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    skylinezpromise is on a distinguished road

      0  

    Default


    please somebody help me find the error in my code

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    skylinezpromise is on a distinguished road

      0  

    Default


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

    Code:
    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...

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread