Question

Sencha Touch 2.2.1
Cmd 3.1.342

我有一个用于使用Sencha Charts和carousel显示数据的sencha网络应用程序。数据通过ajax获得。根据从服务器接收的数据量创建组件。

一切都在开发中运作良好。但是，当我创建生产构建时，组件已创建，但未填充轮播和应用程序崩溃。当我尝试使用以下代码将轮播旋转木马添加到容器时，似乎会发生这种情况：Ext.getCmp(siteNamex+'Cont').add(thecarousel);

然后它死了，控制台日志说：

未捕获的TypeError：无法调用undefined的方法'substring'   Ext.ClassManager.parseNamespace
  Ext.ClassManager.get
  Ext.ClassManager.instantiate
  Ext.ClassManager.instantiateByAlias
  Ext.apply.factory
  Ext.define.factoryItem
  Ext.define.add   Ext.Ajax.request.success
  Ext.apply.callback
  Ext.define.onComplete
  Ext.define.onStateChange（匿名函数）

以下是创建容器的代码：

newcontainer = Ext.Container({
        xtype : 'container',
        flex: 1,
        margin: '0',
        id: siteNamex+'Cont',
        itemId: siteNamex+'Cont',
        height: '100%',
        items: [], 
        cls:'siteContainer',
        html: '<h2 class="siteName" style="'+snStyle+'">'+siteName+'</h2>'
     });

此代码似乎正在运行并根据需要创建容器。

图表填充数组。大小取决于通过ajax收到的数据：

var allcharts = new Array(); //initializing

创建仪表图表：

chartgx = Ext.chart.Chart({  
        xtype: 'chart',  
        renderTo: Ext.getBody(),  
        cls: 'thegauge',  
        itemId: 'gauge'+tt2,  
        store: gaugeStore,  
        width : 'auto',  
        background: 'white',  
        animate: true,  
        insetPadding: 50,  
        axes: [{  
              type: 'gauge',  
              position: 'gauge',  
              minimum: 0,  
              maximum: gaugemax,  
              steps: 10,  
          margin: 10  
            }],  
            series: [{  
              type: 'gauge',  
              field: 'CurrentValue',   
              donut: 30,  
              colorSet: ['#f6821f;', '#e0e2e4']  
            }]  
        });

然后我把这个量表放在一个容器中并添加到数组中：

chartgx2 = Ext.Container({  
        xtype : 'container',  
        flex: 1,  
        layout: 'fit',  
        cls: 'gaugeContainer',  
        items: chartgx,   
        html: gaugeText  
           })  
allcharts.push(chartgx2);

然后使用：

创建轮播

thecarousel = Ext.Carousel({
                        xtype: 'carousel',
                        width: '100%',
                        height: '100%',
                        itemId: 'thecarousel_'+siteName,
                        cls: 'chartscarousel',
                        id: siteNamex+'_carousel',
                        defaults: {
                            styleHtmlContent:true
                        },
                        items: allcharts
                    })

并使用Ext.getCmp(siteNamex+'Cont').add(thecarousel);

添加到容器中

正如我之前所说，这一切在开发中都运行良好，但在生产版本中，它会引发上述错误。

我的app.js有以下内容：

requires: [
        'Ext.field.Select',
    'Ext.Ajax',
    'Ext.Button',
    'Ext.carousel.Indicator',
    'Ext.carousel.Infinite',
    'Ext.carousel.Item',
    'Ext.carousel.Carousel',
    'Ext.fx.easing.EaseOut',
    'Ext.util.TranslatableGroup',
    'Ext.chart.Chart',
    'Ext.chart.axis.Gauge',
    'Ext.chart.theme.*',
    'Ext.util.Format',
    'Ext.MessageBox',
    'Ext.form.Panel',
    'Ext.Panel',
    'Ext.fx.Parser',
    'Ext.Container',
    'Ext.data.*',
    'Ext.dataview.List',
    'Ext.dataview.component.Container',
    'Ext.chart.theme.Base',
    'Ext.chart.theme.TitleStyle',
    'Ext.chart.theme.GridStyle',
    'Ext.chart.Toolbar',
    'Ext.chart.legend.View',
    'Ext.chart.Legend',
    'Ext.chart.series.Bar',
    'Ext.chart.series.Column',
    'Ext.chart.series.Gauge',
    'Ext.chart.series.Series',
    '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.Component',
    'Ext.ComponentManager',
    'Ext.ComponentQuery',
    'Ext.TitleBar',
    'Ext.draw.sprite.Sector',
    'Ext.draw.sprite.Rect',
    'Ext.chart.interactions.Abstract',
    'Ext.chart.axis.Axis',
    'Ext.util.SizeMonitor',
    'Ext.chart.grid.HorizontalGrid',
    'Ext.chart.grid.VerticalGrid'
    ],

当我运行build命令时，没有错误。 Sencha Touch 2.2.1
Cmd 3.1.342

更新我使用this code完全按照页面上显示的方式重建了仪表。这没有解决问题

Answer 1

我会像这样调试它：

在Chrome中打开您的应用
打开开发工具
进入“来源”标签
在暂停符号上单击两次（“暂停未捕获的例外”，左下角的箭头如下图所示）
使您的应用程序崩溃，或者在加载时崩溃时重新加载
调试器将在抛出您注意到的异常之前启动
在调用堆栈中，选择行Ext.ClassManager.instantiateByAlias（第二个箭头）
在“范围变量”标签中，您会看到罪魁祸首的名字（在下面圈出）

由于缩小过程，变量名称可能不同，但您应该能够轻松识别它。或者，您可以在文件.sencha/app/production.properties中禁用压缩，以查看真实代码并使其更容易。

Chrome debugging

Sencha动态添加到组件不能在构建中工作

1 个答案: