Chart works from within the controller, but not from the view

[romerve]

Hello,

I am trying to get a chart to render, but i am having issues. I keep getting "Uncaught TypeError: Cannot read property 'theme' of undefined ext-all-debug.js:41482"

My store works fine as this error only happens when initializing the view.

app.js:

Ext.Loader.setConfig({enabled:true});

var siteAppPath = 'http://localhost/analytics/public/js/analytics/app';


Ext.application({
    name: 'Analytics',
    appFolder: siteAppPath,
    controllers: ['Reporter'],
    
    launch: function() {
        console.log('app');
        
        
        
    }
    
});

controller/Reporter.js:

Ext.define('Analytics.controller.Reporter', {    extend: 'Ext.app.Controller',
    views: ['charts.AssemInOut'] ,
    stores: ['dsAssemInOut'],
    models: ['AssemInOut'],
    
    init: function() {
        
        console.log('contro');
        
        var ch = Ext.create('ch.asio');
        ch.show();
    }
});

view/charts/AssemInOut:

Ext.define('Analytics.view.charts.AssemInOut', {    extend: 'Ext.chart.Chart',
    alias: 'ch.asio',
    
    initComponent: function() {
        
        Ext.apply(this, {
            width: 400,
            height: 500,
            store: 'dsAssemInOut',
            renderTo: Ext.getBody(),
            axes: [
                {
                    title: 'Total Ins and Outs',
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['qtyIn', 'qtyOut'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    minimum: 0
                },
                {
                    title: 'Work Centers',
                    type: 'Category',
                    position: 'left',
                    fields: ['sequence_name']
                }
            ],
            series: [
                {
                    type: 'bar',
                    axis: 'bottom',
                    xField: 'sequence_name',
                    yField: ['qtyIn', 'qtyOut']
                }
            ]
        });
        
        this.callParent(arguments);
        
    }
});

The store and model are working just fine so i ll omit them from now as it seems that the problem is with the view.

I found some other posts about a bug in ext-4.0.2a, but they are from July and June so i am not sure if this still applies as i downloaded it about 3 weeks ago.

Any help is appreciated.

Thanks

[mitchellsimoens]

Couple things I found... Here is the code that is working for me (had to create my own model and store:

Ext.Loader.setConfig({enabled:true});

Ext.define('Analytics.view.charts.AssemInOut', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.ch-asio',  //alias needs the type first 'widget' and then the xtype 'ch-asio' which cannot have periods

    initComponent: function() {

        Ext.apply(this, {
            width: 400,
            height: 500,
            store: 'dsAssemInOut',
            renderTo: Ext.getBody(),
            axes: [
                {
                    title: 'Total Ins and Outs',
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['qtyIn', 'qtyOut'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    minimum: 0
                },
                {
                    title: 'Work Centers',
                    type: 'Category',
                    position: 'left',
                    fields: ['sequence_name']
                }
            ],
            series: [
                {
                    type: 'bar',
                    axis: 'bottom',
                    xField: 'sequence_name',
                    yField: ['qtyIn', 'qtyOut']
                }
            ]
        });

        this.callParent(arguments);

    }
});

Ext.define('Analytics.model.AssemInOut', {
    extend : 'Ext.data.Model',

    fields : ['qtyIn', 'qtyOut', 'sequence_name']
});

Ext.define('Analytics.store.dsAssemInOut', {
    extend : 'Ext.data.Store',
    model  : 'Analytics.model.AssemInOut',

    data   : [
        { qtyIn : 1, qtyOut : 2, sequence_name : 'Test' }
    ]
});

Ext.define('Analytics.controller.Reporter', {
    extend: 'Ext.app.Controller',
    views: ['charts.AssemInOut'] ,
    stores: ['dsAssemInOut'],
    models: ['AssemInOut'],

    init: function() {
        console.log('contro');

        var ch = Ext.widget('ch-asio'); //renderTo will automatically render
    }
});

Ext.application({
    name: 'Analytics',
    controllers: ['Reporter'],

    launch: function() {
        console.log('app');
    }
});

First was the alias you set on your Analytics.view.charts.AssemInOut... it's a two part sting separated by a period. First is the type (widget, plugin, etc) and for views the type is widget. The second part is the actual xtype which cannot contain periods so I changed the alias to 'widget.ch-asio'.

Second thing was in your controller's init method. You were using Ext.create to create a component based on it's xtype. If the xtype is registered (which it is in this case) you should use Ext.widget to create a component based on it's xtype. Ext.create expects the class name so Ext.create('Analytics.view.charts.AssemInOut'); would have worked aswell.

Third thing, after your Ext.create call, you were doing ch.show();. If you have renderTo defined it will automatically render it to that element so it wasn't needed unless you rendered it hidden.

Fourth thing, it's just a tip... things that you want configurable, put outside the initComponent method. Like the width, height, renderTo properties could all be in the same level as alias. This way when you use Ext.create or Ext.widget you can override these if you choose to.

So you have fully runnable code. All you have to do is change your model and store and it should work for you.

[romerve]

Hello Mitchell,

I have made the changes you suggested as you clarified a few things to me. However, i still get the same error: "Uncaught TypeError: Cannot read property 'theme' of undefined ext-all-debug.js:41482"

[mitchellsimoens]

Hello Mitchell,

I have made the changes you suggested as you clarified a few things to me. However, i still get the same error: "Uncaught TypeError: Cannot read property 'theme' of undefined ext-all-debug.js:41482"

This has been fixed in 4.0.7 so you need to update your EXT lib.

[romerve]

Thanks Mitchell,

If you dont mind telling me a bit more about aliases... I read that you needed to use widget, however, prior to your explanation i was trying different things and i was able to use any alias i wanted. Not just the "widget" as mentioned. And to my surprise, i was able to create the views by using the alias i assigned (windows and panels).

Is this mandatory, or is it just that when you use "widget" or "plugin" things get instantiated in a different way?

Thanks

[mitchellsimoens]

I don't think it would put it in there but it could. I would always be verbose and put it in there. This way you are not opening yourself up to anything bad.