Question

我是Sencha触控框架工作的初学者。我正在尝试使用视口，但我遇到了一个奇怪的问题。它抛出“Uncaught TypeError：无法读取未定义异常的属性'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);

Answer 1

您的代码中并不需要Ext.reg('nextScreen', MyApp.views.nextScreen);。检查何时加载nextScreen.js文件。它应该在您的主JS文件之前 - 您拥有App变量的文件。

无论如何，我不确定整个应用程序的外观，但您可能想重新考虑应用程序的架构。

Answer 2

有一件事是Ext.reg的第二个参数需要是构造函数，而不是实例。要创建基于Ext.Panel的构造函数，您可以执行类似

的操作

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

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

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

2 个答案: