Issue while changing viewport in sencha

i am a very beginner to Sencha touch frame work. I am trying work with the viewport, but i am stuck with a strange problem. it throws "Uncaught TypeError: Cannot read property 'isComponent' of undefined exception. I know this question might be little unusual but i need to resolve this somehow.

I have a java script file where i have login screen.

var App = new Ext.Application({
    name: 'MyApp',
    useLoadMask: true,
    开发者_JS百科launch: function () {        

     MyApp.views.loginPanel = new Ext.form.FormPanel({
            scroll: 'vertical',           
            standardSubmit : false,
            items: [
                {
                    xtype: 'fieldset',                  
                    instructions: 'Please enter the information above.',
                    defaults: {
                        required: true,
                        labelAlign: 'left',
                        labelWidth: '50%',
                        labelHeight: '50%'
                    },
                    items: [
                    {
                        xtype: 'textfield',
                        name : 'username',
                        id: 'username',
                        label: 'user Name',
                        useClearIcon: true,
                        autoCapitalize : false
                    }, {
                        xtype: 'passwordfield',
                        name : 'password',
                        id: 'password', 
                        label: 'Password',
                        useClearIcon: false
                      } 
                   ]
                }
            ],
            dockedItems: [{             
                xtype: 'toolbar',
                dock: 'top',
                title: 'Login Screen'               
                },
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [{
                            text: 'Exit',
                            ui: 'confirm',
                            handler: function() {
                                form.exit();
                            }
                        },                       
                        {xtype: 'spacer'},
                        {
                            text: 'Reset',
                            handler: function() {
                                form.reset();
                            }
                        },                       
                        {
                                text: 'Login',
                                ui: 'action',
                                handler: function() {
                                    //TODO: handle the event
                                    MyApp.views.viewport.setActiveItem('nextScreen', { type: 'slide', direction: 'right' });
                                }                                                                           
                        }                     
                    ]
                }
            ]
        });


        MyApp.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [MyApp.views.loginPanel, MyApp.views.nextScreen]
        })
    }
});

Now i have the nextScreen.js file. I am loading the JS file in my login.html.

My nextScreen.js looks like this:

    var opt = [
        {text: 'Alabama',  value: 'AL'},
        {text: 'Alaska', value: 'ALS'},
        {text: 'Indiana',  value: 'IN'}
    ];


var stateList = new Ext.form.Select({
    label : 'State',
    width: '100%',
    name: 'selectField',
    layout:'auto',
    options: opt,
    autoLoad : true,
    autoDestroy : true
});


MyApp.views.nextScreen =  new Ext.Panel({
            fullscreen: true,
            id:'nextScreen',
            layout: 'fit',
            style: 'background-color:white',
            scroll:'vertical',          
            html:'sample screen',   
            items: [stateList]      
    }); 
Ext.reg('nextScreen', MyApp.views.nextScreen);

---

You don't really need Ext.reg('nextScreen', MyApp.views.nextScreen); in your code. Check when you are loading the nextScreen.js file. It should come before your main JS file - the file where you have the App variable.

Anyway I'm not sure what the whole app look like but you may want to reconsider your app's architecture.

---

One thing is that the second parameter to Ext.reg needs to be a constructor function, not an instance. To create a constructor based on Ext.Panel you could do something like

MyApp.views.nextScreen = Ext.apply( Ext.Panel,{ fullscreen: true, id:'nextScreen', layout: 'fit', style: 'background-color:white', scroll:'vertical',
html:'sample screen',
items: [stateList]
});

It doesn't look like you need to create your own type of component though, so you can probably omit the call to Ext.reg.