Sencha Touch error: object has no method getShowInLegend

0
votes

Sencha Touch 2.3.1 Cmd: 4.0.X.X

My Sencha Touch Charts app throws this error when it tries to draw charts:

Uncaught TypeError: Object [object Object] has no method 'getShowInLegend' AbstractChart.js?_dc=1395914109534:649
Ext.define.refreshLegendStore AbstractChart.js?_dc=1395914109534:649
Ext.define.updateSeries AbstractChart.js?_dc=1395914109534:877
setter sencha-touch-all-debug.js:5491
Base.implement.initConfig sencha-touch-all-debug.js:4920
Ext.define.constructor sencha-touch-all-debug.js:22651
Base.implement.callParent sencha-touch-all-debug.js:4656
Ext.define.constructor sencha-touch-all-debug.js:32375
Base.implement.callSuper sencha-touch-all-debug.js:4735
Ext.define.constructor Component.js?_dc=1395914109519:100
Base.implement.callSuper sencha-touch-all-debug.js:4735
Ext.define.constructor AbstractChart.js?_dc=1395914109534:626
Class sencha-touch-all-debug.js:5208
(anonymous function) VM14212:3
Ext.ClassManager.instantiate sencha-touch-all-debug.js:6936
Ext.ClassManager.instantiateByAlias sencha-touch-all-debug.js:6848
Ext.apply.factory sencha-touch-all-debug.js:9980
Ext.define.factoryItem sencha-touch-all-debug.js:32637
Ext.define.add sencha-touch-all-debug.js:32714
Ext.define.applyItems sencha-touch-all-debug.js:32538
setter sencha-touch-all-debug.js:5482
(anonymous function) sencha-touch-all-debug.js:5516
Ext.define.applyActiveItem sencha-touch-all-debug.js:33208
(anonymous function) sencha-touch-all-debug.js:16565
Base.implement.initConfig sencha-touch-all-debug.js:4920
Ext.define.constructor sencha-touch-all-debug.js:22651
Base.implement.callParent sencha-touch-all-debug.js:4656
Ext.define.constructor sencha-touch-all-debug.js:32375
Class sencha-touch-all-debug.js:5208
(anonymous function) VM14212:3
Ext.ClassManager.instantiate sencha-touch-all-debug.js:6936
Ext.ClassManager.instantiateByAlias sencha-touch-all-debug.js:6848
Ext.apply.factory sencha-touch-all-debug.js:9980
Ext.define.factoryItemWithDefaults sencha-touch-all-debug.js:32683
Ext.define.add sencha-touch-all-debug.js:32707
Ext.define.applyItems sencha-touch-all-debug.js:32538
setter sencha-touch-all-debug.js:5482
(anonymous function) sencha-touch-all-debug.js:5516
Ext.define.applyActiveItem sencha-touch-all-debug.js:33208
Base.implement.callParent sencha-touch-all-debug.js:4656
Ext.define.applyActiveItem sencha-touch-all-debug.js:46269
(anonymous function) sencha-touch-all-debug.js:16565
Base.implement.initConfig sencha-touch-all-debug.js:4920
Ext.define.constructor sencha-touch-all-debug.js:22651
Base.implement.callParent sencha-touch-all-debug.js:4656
Ext.define.constructor sencha-touch-all-debug.js:32375
Class sencha-touch-all-debug.js:5208
(anonymous function) VM14212:3
Ext.ClassManager.instantiate sencha-touch-all-debug.js:6936
Ext.ClassManager.instantiateByAlias sencha-touch-all-debug.js:6848
Ext.apply.factory sencha-touch-all-debug.js:9980
Ext.define.factoryItem sencha-touch-all-debug.js:32637
Ext.define.add sencha-touch-all-debug.js:32714
doCharts doCharts.js:394
Ext.Ajax.request.success standardFunctions.js:166
Ext.apply.callback sencha-touch-all-debug.js:10268
Ext.define.onComplete sencha-touch-all-debug.js:35765
Ext.define.onStateChange sencha-touch-all-debug.js:35709
(anonymous function)

The charts are rendered to this view:

Ext.define('dashboards.view.Main', {
    extend: 'Ext.Panel',
    requires: [
        'Ext.chart.*',
        'Ext.draw.sprite.Sector',
        'Ext.chart.Chart', 
        'Ext.chart.series.Column',
        'Ext.chart.AbstractChart',
        'Ext.chart.SpaceFillingChart',
        'Ext.dataview.component.Container',
        'Ext.chart.series.Series',
        'Ext.chart.series.Gauge',
        'Ext.carousel.Indicator',
        'Ext.carousel.Infinite',
        'Ext.carousel.Item',
        'Ext.carousel.Carousel',
        'Ext.fx.easing.EaseOut',
        'Ext.util.TranslatableGroup',
        'Ext.chart.series.Cartesian',
        'Ext.chart.series.Area',
        'Ext.chart.Label',
        'Ext.chart.Highlight',
        'Ext.chart.Callout',
        'Ext.chart.Transformable',
        'Ext.chart.series.ItemEvents',
        'Ext.chart.theme.Style',
        'Ext.draw.Color', 
        'Ext.chart.series.Bar',
        'Ext.chart.series.Column',
        'Ext.chart.axis.Gauge',
        'Ext.chart.theme.Base',
        'Ext.chart.theme.Base',
        'Ext.chart.theme.TitleStyle',
        'Ext.chart.theme.GridStyle',
        'Ext.chart.Toolbar',
        'Ext.chart.legend.View',
        'Ext.chart.Legend',
        'Ext.chart.axis.Numeric',
        'Ext.chart.axis.Category',
        'Ext.draw.Surface',
        'Ext.draw.Draw',
        'Ext.draw.Matrix',
        'Ext.draw.engine.Canvas',
        'Ext.draw.CompositeSprite',
        'Ext.fx.Frame',
        'Ext.draw.Sprite',
        'Ext.fx.Sprite',
        'Ext.draw.sprite.Sector',
        'Ext.draw.sprite.Rect',
        'Ext.chart.interactions.Abstract',
        'Ext.chart.axis.Axis',
        'Ext.chart.axis.Abstract',
        'Ext.util.SizeMonitor',
        'Ext.chart.grid.HorizontalGrid','Ext.chart.grid.VerticalGrid','Ext.draw.fx.TimingFunctions','Ext.Container','Ext.TitleBar','Ext.data.Store','Ext.data.StoreManager'
        ],
    alias: 'widget.mainview',
    id: 'mainpage',
    getSlideLeftTransition: function () {
        return { type: 'slide', direction: 'left' };
    },

    getSlideRightTransition: function () {
        return { type: 'slide', direction: 'right' };
    },
    config: {
        layout: {
            type: 'fit'
        },
        items: [
            {
                 xtype : 'container',
                 flex: 1,
                 id: 'introtext',
                 html: '<p>Please select from your dashboards above</p>'
            },
            {
                 xtype : 'selectfield',
                 store : companiesStore2,
                 name : 'companies',
                 queryMode: 'local',
                 id : 'companiesSelect',
                    itemId: 'companySelect',
                    valueField : 'companyname',
                    displayField : 'companyname',
                    style: 'overflow:hidden',
                    listeners: {
                        change: function(field,value) {
                            getStats(value)
                        }
                    }   
              },

              {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    id: 'bumtoolbar',
                    items: []
                },
                {
                layout: {
                    pack: 'end'
                },
                xtype: 'titlebar',
                id: 'titlebartop',
                title: 'axisfirst Dashboards',

                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        text: 'Log Off',
                        itemId: 'logOffButton2',
                        id: 'logOffButton2',
                        align: 'right',
                        cls: 'logoffBtn',
                        scope: this,
                        listeners: {                                
                            tap: function() {
                                Ext.Msg.confirm("Log out", "Are you sure you want to logout?", function(btn) {
                                if (btn === 'yes') {
                                    logout();
                                    //Ext.Viewport.setActiveItem({ xtype: loginview });

                                  } else {
                                    return false;
                                  }
                                }, this);

                            }                           
                        }
                    }
                ]
            }]
    }


});

The chart is added using a separate .js file. The code looks like this:

var chartgx = {
                                    cls: 'thegauge',
                                    itemId: 'gauge'+tt2,
                                    xtype: 'chart',
                                    shadow: true,
                                    store: gaugeStore,
                                    width : 'auto',
                                    animate: true,
                                    insetPadding: 50,
                                    axes: [{
                                        type: 'gauge',
                                        position: 'gauge',
                                        minimum: 0,
                                        maximum: gaugemax,
                                        steps: 10,
                                        margin: 10,
                                        direction: 'right'
                                    }],
                                    series: [{
                                        showInLegend: false,
                                        type: 'gauge',
                                        position: 'gauge',
                                        minimum: 0,
                                        maximum: gaugemax,
                                        steps: 10,
                                        margin: 10,
                                        angleField: 'CurrentValue',
                                        donut: 30,
                                        colorSet:[gaugeColor,'#e1e1e1']

                                    }]

                                };


                                var gaugeText = '<p class="gaugetitle">' + gaugeTitle + ': ' + currentValue + '</p>';
                                var chartgx2 = Ext.Container({
                                        xtype : 'container',
                                        flex: 1,
                                        layout: 'fit',
                                        cls: 'gaugeContainer',
                                        needle: true,
                                        items: chartgx, 
                                        html: gaugeText
                                   });
                                  if (gaugeTitle !== '') {
                                      allcharts.push(chartgx2);
                                  }

I have looked at AbstractChart.js and, sure enough, it is calling the function. I have searched my entire directory (inc /app and /src) but cannot find the function.

I have updated all files that 'Ext.chart.AbstractChart' requires and extends, but still get the error.

Can someone please tell me which class the function belongs to, so I can update from docs.sencha.com, or, alternatively, tell me how to correct this error.

1
javascriptextjsextjs4sencha-touchsencha-charts
Provide the code of your chart view. – Sujata Chanda
@SujataChanda: more code added – Jez D
@SujataChanda: via a separate file. Now added to this question. Thanks. – Jez D

1 Answers

0
votes

About your question, your "series" is defined on AbstractChart. Your chart extends AbstractChart so you dont need to add the require of it (AbstractChart). The method getSeries is generated by the sencha-touch core. All fields of a object that extends Ext.base has the get[MyField] and set[MyField].

The error is happing on this function. When it trys to getShowInLegend. But each item of Series has the method getShowInLegend, you can confirm looking here on showInLegend: true, line.

Like I said in the first line, all objects that extends Ext.base have the get[MyField] method and Ext-chart-series-Series extends to Ext.base.

With this informations the problem is probably some misunderstanding on building the chart. But we dont have enogh information of how your chartgx is created. Have you used the Ext.create?