Sencha Touch testing build not working

Question

I've finished my first app using sencha touch 2.2.1. Now I uploaded it onto my server and tried to access it with my phone. Everything works well. My Dashboard contains 6 buttons, but only 1 of them is working. Each other throws the following error

TypeError: 'undefined' is not an object (evaluating 'name.substring')

The error occurs in the function parseNamespace. But I don't know what is wrong. I build the app using Sencha Architect and in the preview everything was fine. The testing package was created using the build-button from architect. If anyone could help me, the app is located here: app.ttv-rees-groin.de

Many thanks

Answer 1

This may be issue with class loading. The classes which are referred in the event of button events may not be loaded at the time.

Those classes may be missed when packaging application.

Answer 2

My experience found that Architect's build and package tools created a bloated mess of unnecessary files far exceeding what was required. Technical details: Architect 2 - all builds, Sencha Touch 2.0-2.2.x including all versions in between, Sencha Cmd 3.x

The cleanest and leanest build technique for developing in Architect was to save then fire the build using Sencha Cmd.

sencha app build

This performs the default "production" build.

The difference in output in this case went from a 32MB dump of files in the production folder with all resources, library, extensions etc, to the minimum required files totalling 0.8MB, and no longer requiring the touch library as only the classes needed were compiled into the app.

As for the error at hand, this error has something to do with class namespace, alias and xtype.

(Quick thanks to http://ruidevnotes.wordpress.com/2013/07/25/sencha-ext-js-4-common-typeerror/, saving me quite a lot of typing for these 4 things to check).

Possible solutions:

1. If class has controller, make sure the controller’s views config match the namespace specified on the class view’s Ext.define. Example: (controller) views : ['namespace.of.my.View']
2. When using class on other view as xtype, make sure view’s alias is widget.[customXtype] so when adding it as an item to other viems, use xtype : [customXtype]
3. Make sure view’s controller is added on app.js controllers.
4. When class view has no controller and you wanted to use it on other views, make sure to add the namespace of that view on Ext.require(['class.view.namespace.name']); and specify the xtype config instead of alias.

On top of these points, I recall an issue with list plugins, that I believe behaves identical to the error you are encountering. Prebuild - would work. Post build, issues and errors. The way I was able to get around this error was via this technique:

requires: [
    'Ext.XTemplate',
    'Ext.plugin.ListPaging'
],

config: {
    ..., // other standard configs removed for brevity
    plugins: [
        {
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true,
            type: 'listpaging'
        }
    ]
}

The thing to note is the exaggerated plugins declaration. Without this comprehensive declaration, the ListPaging plugin caused all manner of pain and chaos, and solely after a build.

EDIT: spelling.