Question

When the app launches it will display screen1. And then when we click on a button it will display panel1 or panel2. My code as follows; I get an error when i add panel2.

launch: function() {


    Ext.create('Ext.container.Viewport', {
        layout: 'card',
        items: [
        { 
            xtype: 'panel', 
        items: { xtype: 'screen1' }
        },
        {
            xtype: 'panel',
            items: { xtype:'panel1' }
        }

        ] 
    }); 

}

As soon as i add another panel; and i get an error

TypeError: namespace is undefined
[Break On This Error]   

if (namespace === from || namespace.substring(0, from.length) === from) {

Code:

items: [
            { 
                xtype: 'panel', 
            items: { xtype: 'screen1' }
            },
            {
                xtype: 'panel',
                items: { xtype:'panel1' }
            },
            {
                xtype: 'panel',
                items: { xtype:'panel2' }
            }

        ] 

NOTE: I have added the Panel2 in the views: [ Panel2']

UPDATE

Ext.define('MyApp.view.Panel2', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.panel2',

    height: 250,
    width: 400,
    activeTab: 0,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    title: 'Tab 1'
                },
                {
                    xtype: 'panel',
                    title: 'Tab 2'
                },
                {
                    xtype: 'panel',
                    title: 'Tab 3'
                }
            ]
        });

        me.callParent(arguments);
    }

});

Answer 1

It’s most likely because you’re missing dependencies. Since you didn’t post your application definition, you need to require the views in the controller (or, if you aren’t even that far yet, in the requires on the application itself).

Have a look at /examples/app/simple in the download to see how it sets up requires.