Sencha touch 在sencha中更改视口时出现问题

我是一个非常初学者森查触摸框架工作。我正在尝试使用视口，但遇到了一个奇怪的问题。它抛出“UncaughtTypeError:无法读取未定义异常的属性'isComponent'。我知道这个问题可能有点不寻常，但我需要以某种方式解决这个问题

我有一个java脚本文件，其中有登录屏幕

var App = new Ext.Application({
    name: 'MyApp',
    useLoadMask: true,
    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]
        })
    }
});

现在我有了nextScreen.js文件，我正在login.html中加载这个js文件

我的nextScreen.js如下所示：

    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);

---

一件事是Ext.reg的第二个参数必须是构造函数，而不是实例

MyApp.views.nextScreen=Ext.apply（Ext.Panel{
全屏：对，
id:'nextScreen'，
布局：“适合”，
样式：“背景色：白色”，
滚动：'垂直'，

html:“示例屏幕”，

项目：[状态列表]

})；

---

不过，看起来您不需要创建自己类型的组件，因此您可以省略对Ext.reg的调用。

您实际上不需要

Ext.reg（'nextScreen'，MyApp.views.nextScreen）

在代码中。在加载

nextScreen.js

文件时进行检查。该文件应位于主js文件之前，即包含

App

变量的文件

---

无论如何，我不确定整个应用程序是什么样子，但您可能需要重新考虑应用程序的架构。

实际上，您只需将id传递给setActiveItem@Jason..我可以通过邮件分享我的消息来源如果你不介意的话，可以帮我吗buddy@llya…我可以通过邮件分享我的信息来源…如果你不介意的话，可以帮我吗在JSFIDLE上是这样的：。只需按照加载单独JS文件的顺序放置所有javascript。我在哪里可以共享多个JS文件。只有一个窗口用于JSCopy&paste该窗口中的所有代码，与加载HTML文件中的JS文件的顺序相同。你的应用程序有多少JS文件？@llya..我在这里共享了。我不知道Simple请把东西拿给我。