1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Answers
    1
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default Answered: Chart works from within the controller, but not from the view

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


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

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

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Answers
    3354
    Vote Rating
    747
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Answers
    1
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    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"

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Answers
    3354
    Vote Rating
    747
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by romerve View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    36
    Answers
    1
    Vote Rating
    0
    romerve is on a distinguished road

      0  

    Default


    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

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Answers
    3354
    Vote Rating
    747
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar