Sencha Touch: setting items in panel - hidden view by xtype causes undefined error

Question

I'm building an application with Sencha Touch 2.x. It consists of several screens that may overlap each other.

On app startup I'm loading all screens by adding them as items in my main view (part of the viewport). All of them except the start screen are hidden: true, which is working perfectly fine. I've created a new view and tried adding it the same way I did with the others (it is in fact a copy of another one, just changed names), but on app startup I get:

TypeError: 'undefined' is not an object (evaluating 'firingFn.apply')

When I remove the hidden: true attribute, the view is shown and the app loads. When I create the view with Ext.create(namespace.view.name) it is working fine.

The others views (which are more or less exactly the same) are working!

I've given a unique xtype, specified the path on Ext.define, added the view to app.js. As I'm able to show it without "hidden: true" the problem shouldn't lie somewhere in there.

Does anybody know about this behavior?

(I know that it is recommended to create and destroy the views once they are needed, but at the moment we're going a different approach. So I'm interested what caused this behavior.)

Here's my Main view:

Ext.define('namespace.view.Main', {
extend: 'Ext.Container',
xtype: 'Main',

config: {

    layout: 'hbox',     
    items: [
        //actual necessary screens
        {
            xtype: 'Start',
            showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}
        },

        //Preloading all Screens on startup 
        {
            xtype: 'SearchOertlichkeit',
            hidden: true
                             //this is the one causing trouble !
        },
        {
            xtype: 'MeldungNeu',
            hidden: true,
            showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}                
        },
        {
            xtype: 'MeldungenBearbeiten',
            hidden: true,
            showAnimation: {type:'fade', duration: 200, easing: 'easeInOut'}
        },
        {
            xtype: 'SearchLocation',
            hidden: true
        },
        {
            xtype: 'SearchMieteinheit',
            hidden: true
        },              
        {
            xtype: 'Menu',
            hidden: true    
        }        
    ]

} //endconfig 

});

Here's a part of the view I try to show:

Ext.define('namespace.view.SearchOertlichkeit', {
extend: 'Ext.Container',    
xtype: 'SearchOertlichkeit',

config: { 

    height: '100%',
    width: window.innerWidth-300,
    padding: 10,

    modal: true,
    hideOnMaskTap: true,

    top: 0,
    right: 0,
    bottom: 0,
    left: 'auto',

    enter:'right',
    exit: 'right',

    showAnimation: {
        type: 'slideIn',
        direction: 'left',
        easing: 'easeInOut'
    },

    hideAnimation: {
        type: 'slideOut',
        direction: 'right',
        easing: 'easeInOut'
    },

    items: [
        {               
            //here are some items           

        },          
    ],   

    listeners: {
        initialize: function(comp , eOpts){
            this.element.on('swipe', 
                function(event, node, options, eOpts) {
                    namespace.app.getController('Main').onSwipe(event.direction, 'searchOertlichkeit');
                }, comp
            ); //endonswipe
        } //endinitialize
    } //endlisteners
},   });

I couldn't find any errors with the syntax (using Aptana, doesn't show me any errors too) but when I build for production (sencha cmd is running successful) I get an error once I try to run the prod-app:

Error evaluating http://127.0.0.1:8020/path/production/app.js with message: SyntaxError:     Expected token '}'

Answer 1

Check the last line in your main view, the brackets are commented:

} //endconfig });

should be like:

    } //endconfig 
});