Sencha dynamically adding to component not work in build

Question

Sencha Touch 2.2.1
Cmd 3.1.342

I have a sencha web app used to display data using Sencha Charts and carousel. The data is obtained via ajax. Components are created according to the amount of data that is received from the server.

Everything works fine in development. However, when I create a production build, the components are created, but not populated with the carousel and the app crashes. It seems that this happens when I try to add the carousel the carousel to the container using: Ext.getCmp(siteNamex+'Cont').add(thecarousel);

It then dies and console log says:

Uncaught TypeError: Cannot call method 'substring' of undefined 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 (anonymous function)

Here is the code which creates the container:

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 seems to be working and creates the container as required.

Charts populate an array. The size depends on the data received via ajax:

var allcharts = new Array(); //initializing

Create gauge 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 gauge in a container and add to array:

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

The carousel is then 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 is added to the container using Ext.getCmp(siteNamex+'Cont').add(thecarousel);

As I said earlier, this all works fine in development, but in the production build it throws up the error mentioned.

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 build command there are no errors. Sencha Touch 2.2.1
Cmd 3.1.342

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

It seems that the error lies in your allcharts array. May we see? — rixo
That's what I thought. But, it's odd that the Android version works fine. — Jez D
We have had a thorough debug session, and we think the missing require is related to the charts. We have been through Sencha Docs and added those that weren't already in app.js. Interestingly, the paths mentioned on Sencha Docs were not all correct — Jez D
You know the way you create your components is very weird? That should be new Ext.Carousel({...}). It is possible that what you do modify the class and break the lib. Furthermore, components instantiated this way don't need the xtype. Anyway, regarding your question, you should have a warning in dev mode showing in the console, telling you that a require is missing... Isn't it the case? — rixo

rixo rixo · Accepted Answer · 2013-09-26T13:11:00

I would debug it like this:

Open your app in Chrome
Open dev tools
Go in "Sources" tab
Click two times on the pause symbol ("Pause on uncaught exceptions", bottom left arrow in the image bellow)
Do the thing that makes your application crash, or reload if it crashes on loading
The debugger will kick in just before throwing the exception you've noted
In the call stack, select the line Ext.ClassManager.instantiateByAlias (second arrow)
In the "Scope Variables" tab, you'll see the name of the culprit (circled bellow)

The variable name may be different because of the minification process, but you should be able to identify it easily. Optionally, you can disable compression in the file .sencha/app/production.properties to see the real code and make it easier.

Chrome debugging

Sencha dynamically adding to component not work in build

1 Answers