Sencha Touch2 - Panels with Card layout, not working

[chughgaurav]

I have tabpanel, which contains a few tabs. I will be concentrating on the 6th tab here - navigatingPanels.js file. In this file, I have a card layout, so that the user can fill form1 & move to form2 on submission (slide to form2). I also have a docked toolbar, with a back button, so that the user can move back to form1 (if needed).
It gives an error - Uncaught Error: [ERROR][Ext.Base#callParent] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance.
The app can be seen here - http://maalguru.in/touch/Raxa-70/MyApp/

NavigatingPanels.js

Ext.define('MyApp.view.navigatingPanels',{
    extend: 'Ext.Panel',
    id: 'navigatingPanels',
    xtype: 'navigatingPanels',
    config:{
        iconCls:'user',
        title: 'Navigating Panels',
        layout: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        },
        defaults:{
            styleHtmlContent: 'true'
        },
     items: [  
                {
                    docked: 'top',
                    xtype: 'toolbar',
                    title: 'Registeration Form',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            align: 'centre',
                            //back button to take the user back from form2 to form1
                            handler: function() {
                                Ext.getCmp('navigatingPanels').setActiveItem(form1);
                    
                            }
                        }
                    ]
                },
                form1,
                form2
        ]
    }
    
});




var form1 = new Ext.Panel({
scrollable: 'vertical',
    items:[
        {
                xtype: 'fieldset',
                title: 'Form 1',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'name',
                    },
                    {
                        xtype:'button',
                        text:'Save Data & move to form2',
                        ui: 'confirm',
                        //TODO add some action: to store data
                        //save data & move to form2
                        handler: function() {
                            Ext.getCmp('navigatingPanels').setActiveItem(form2,{ type: 'slide', direction: 'right' });
                            console.log("Form1");
                        }
                    }
                ]
        }
    ]
});
var form2 =new Ext.Panel({
    scrollable: 'vertical',
    items:[
        {
                xtype: 'fieldset',
                title: 'Form 2',
                items: [
                    {
                        xtype: 'textareafield',
                        label: 'Message',
                        name: 'message'
                    },
                    {
                        xtype:'button',
                        text:'Submit Data',
                        ui: 'confirm',
                        //TODO add some action: to store data
                        //action: 'Submit Data'
                    }
                ]
            }
    ]
});

Viewport.js

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.TabPanel',
    xtype: 'my-viewport',
    
    config:{
        fullscreen: true,
        tabBarPosition: 'bottom',
        
        items: [
                {
                    xclass: 'MyApp.view.navigatingPanels'
                }
        ]
    }
});

App.js

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    name: 'MyApp',
    
    controllers:['Main'],
    
    launch: function() {
          Ext.create('MyApp.view.Viewport', {fullscreen: true});    


    }
});

[mitchellsimoens]

You should not give component instances as items in Ext.define like you are. You should just specify config objects

[chughgaurav]

Thanks, your answer reminded me, I could have simply used

Ext.getCmp('navigatingPanels').setActiveItem(0,{ type: 'slide', direction: 'right' }); instead of using those instances.