Sencha 动态添加到组件在构建中不起作用

Posted 2023-02-25

【中文标题】Sencha 动态添加到组件在构建中不起作用

【英文标题】：Sencha dynamically adding to component not work in build

【发布时间】：2013-09-24 08:48:15

【问题描述】：

煎茶触控 2.2.1 命令 3.1.342

我有一个 sencha 网络应用程序，用于使用 Sencha 图表和轮播显示数据。数据是通过ajax获取的。组件是根据从服务器接收到的数据量创建的。

在开发中一切正常。但是，当我创建生产版本时，会创建组件，但不会填充轮播，并且应用程序会崩溃。当我尝试使用以下方式将轮播添加到容器中时，似乎会发生这种情况：Ext.getCmp(siteNamex+'Cont').add(thecarousel);

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

未捕获的类型错误：无法调用未定义的方法“子字符串” Ext.ClassManager.parseNamespace Ext.ClassManager.get Ext.ClassManager.instantiate Ext.ClassManager.instantiateByAlias Ext.apply.factory Ext.define.factoryItem 扩展定义添加 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'
    ],

当我运行构建命令时没有错误。 煎茶触控 2.2.1 命令 3.1.342

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

【问题讨论】：

看来错误出在您的allcharts 数组中。我们可以看看吗？

您可能缺少一个要求，但我不知道是哪个。

我就是这么想的。但是，奇怪的是 android 版本运行良好。

我们进行了彻底的调试，我们认为缺少的需求与图表有关。我们已经通过 Sencha Docs 并添加了那些尚未在 app.js 中的内容。有趣的是，Sencha Docs 中提到的路径并不都是正确的

您知道创建组件的方式很奇怪吗？那应该是new Ext.Carousel(...)。您所做的事情可能会修改类并破坏库。此外，以这种方式实例化的组件不需要xtype。无论如何，关于您的问题，您应该在控制台中显示开发模式下的警告，告诉您缺少一个需求......不是这样吗？

【参考方案1】：

我会这样调试它：

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

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

【讨论】：

谢谢。错误似乎是 : TypeError arguments: Arguments[2] 0: "axis.Gauge"，但我的 app.js 中有 'Ext.chart.axis.Gauge' 需要

你确定类Ext.chart.axis.Gauge 存在吗？文档中没有提到它。只有一个仪表系列。

确实我错了，它存在于"Touch chart" docs;但是它不包含在基本的 Touch 包中，无论是在文档中还是在源代码中。

再一次，我不能确定这个类没有在 Touch 2 中被删除......文档中的 example 不使用轴。如果我是你，我会像这个例子一样创建我的图表，并完全摆脱这个有问题的类。现在，出于好奇，您还可以检查该类是否正确声明了其alias: 'axis.gauge'；您在 SDK 中拥有的似乎是一个不推荐使用的幻影类，其代码可能已过时。

将别名添加到 axis.gauge 似乎可以解决该文件的问题，但现在使用 chart.series.Gauge - 向该文件添加缺少的别名并没有纠正它。