Sencha dynamically adds to component not working in assembly

Question

Sencha Touch 2.2.1
Cmd 3.1.342

I have a sencha web application used to display data using Sencha charts and a carousel. Data obtained through ajax. Components are created based on the amount of data received from the server.

Everything works fine in development. However, when I create a production assembly, the components are created, but the carousels are not filled, and the application crashes. This seems to happen when I try to add a carousel to the carousel to the container using: Ext.getCmp(siteNamex+'Cont').add(thecarousel);

Then he dies, and the console magazine says:

Uncaught TypeError: Unable to call substring method undefinedExt.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 (anonymous function)

Here is the code that the container creates:

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

This code works and creates the container as needed.

Charts fill the array. The size depends on the data received through ajax:

 var allcharts = new Array(); //initializing 

Create a calibration chart:

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

Then I put this calibration in the container and add it to the array:

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

Then the carousel is created using:

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

and added to the container using Ext.getCmp(siteNamex+'Cont').add(thecarousel);

As I said earlier, all this works fine in development, but in the assembly it causes the indicated error.

My app.js has the following:

 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' ], 

When I run the build command, there are no errors. Sencha Touch 2.2.1
Cmd 3.1.342

Update: I rebuilt the sensor using this code exactly as it appears on the page. This did not solve the problem.

Answer 1

I would debug it like this:

• Open the app in Chrome
• Open Developer Tools
• Click on the Sources tab.
• Double-click on the pause symbol ("Pause on uncaught exceptions", bottom left arrow in the image below)
• Do what causes the application to crash, or reload it at boot time
• The debugger will only start deleting before throwing the exception that you noted
• In the call stack, select the line Ext.ClassManager.instantiateByAlias (second arrow)
• On the Variable Areas tab, you will see the name of the culprit (shown below)

The variable name may differ due to the minimization process, but you should easily identify it. If you wish, you can turn off compression in the .sencha/app/production.properties file to see the real code and simplify it.