Sencha Touch错误:对象没有方法getShowInLegend

时间:2014-03-27 10:12:53

标签: javascript extjs extjs4 sencha-touch sencha-charts

Sencha Touch 2.3.1 Cmd:4.0.X.X

我的Sencha Touch Charts应用在尝试绘制图表时会抛出此错误:

  

Uncaught TypeError:Object [object Object]没有方法'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
  类sencha-touch-all-debug.js:5208
  (匿名函数)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
  (匿名函数)sencha-touch-all-debug.js:5516
  Ext.define.applyActiveItem sencha-touch-all-debug.js:33208
  (匿名函数)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
  类sencha-touch-all-debug.js:5208
  (匿名函数)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
  (匿名函数)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
  (匿名函数)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
  类sencha-touch-all-debug.js:5208
  (匿名函数)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
  (匿名函数)

图表将呈现给此视图:

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);

                            }                           
                        }
                    }
                ]
            }]
    }


});

使用单独的.js文件添加图表。代码如下所示:

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);
                                  }

我查看了AbstractChart.js,当然,它正在调用该函数。我搜索了我的整个目录(inc / app和/ src)但找不到该功能。

我已更新'Ext.chart.AbstractChart'所需和扩展的所有文件,但仍然会收到错误。

有人可以告诉我该功能属于哪个类,所以我可以从docs.sencha.com更新,或者告诉我如何更正此错误。

1 个答案:

答案 0 :(得分:0)

关于您的问题,您的“系列”在AbstractChart上定义。您的图表扩展了AbstractChart,因此您无需添加它的要求(AbstractChart)。 getSeries方法由sencha-touch核心生成。扩展Ext.base的对象的所有字段都有get [MyField]并设置[MyField]。

该错误正在考虑this功能。当它尝试getShowInLegend时。但系列的每个项目都有getShowInLegend方法,您可以确认在showInLegend: true,行上查看here

就像我在第一行中所说的,扩展Ext.base的所有对象都有get [MyField]方法,Ext-chart-series-Series扩展到Ext.base。

有了这些信息,问题可能是对构建图表的一些误解。但是我们没有关于如何创建chartgx的信息。你使用过Ext.create吗?