CODEWITHSUNDEEP
sencha-touch-2
mAtZ
mAtZ

Reputation: 89

Controller ref not working

In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:

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'
        }
    ]
}

});

In my controller, I want to use a reference to this panel like this:

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

In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?

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

Upvotes: 0

Views: 169

Answers (2)

mAtZ
mAtZ

Reputation: 89

The correct way of using the ref in my example would be:

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

Upvotes: 0

chinabuffet
chinabuffet

Reputation: 5588

Is anything actually creating an instance of your view?

Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.

Upvotes: 1

Related Questions