Question

在我的SenchaTouch 2.3.1应用程序中，我为用户构建了一个登录面板。它看起来像这样：

Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',

requires: [
    'Ext.form.FieldSet',
    'Ext.field.Password',
    'Ext.Button'
],

config: {
    layout: 'vbox',
    items: [
        {
            xtype: 'fieldset',
            title: 'Business Login',
            itemId: 'login',
            items: [
                {
                    xtype: 'emailfield',
                    itemId: 'email',
                    label: 'E-Mail',
                    name: 'email',
                    required: true
                },
                {
                    xtype: 'passwordfield',
                    itemId: 'password',
                    label: 'Passwort',
                    name: 'password',
                    required: true
                }
            ]
        },
        {
            xtype: 'button',
            itemId: 'loginButton',
            cls: 'button-blue',
            text: 'Login'
        },
        {
            xtype: 'panel',
            itemId: 'loggedInPanel',
            cls: 'logged-in-panel',
            tpl: [
                'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
            ],
            hidden: true,
            margin: '10 0'
        }
    ]
}

}）;

在我的控制器中，我想使用对此面板的引用，如下所示：

config: {
    refs: {
        loginPanel: 'loginPanel',
        navigationView: '#morenavigation',
        loggedInPanel: '#loggedInPanel',
        loginButton: '#loginButton'
    }
}

在控制器的启动功能中，我想检查用户是否已登录以显示其ID并显示注销按钮。但是当我试图获得面板参考时，它是未定义的。但为什么呢？

launch: function() {
    var me = this,
        sessionInfo = Ext.getStore('SessionInfo');

    console.log(me.getLoginPanel()); <-- undefined

    if (null !== sessionInfo.getAt(0).get('sessionId')) {
        me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
    }
}

Answer 1

是否有任何实际创建视图的实例？

在应用程序的launch方法中，您可能需要创建它的实例，然后为您的视图提供fullscreen: true配置，或将其添加到视口。有关Ext.app.Application的Sencha Touch API文档的示例主视图是从应用程序的启动函数创建的。

Answer 2

在我的示例中使用ref的正确方法是：

refs: {
    loginPanel: {
        autoCreate: true,
        forceCreate: true,
        xtype: 'loginPanel'
    }
}

控制器参考不起作用

2 个答案: