App switching between views

Question

I'm trying to have an app switch between views, depending on whether a user is logged in or not. The app will try to load the main view first, and then in one of the controller's launch functions will swap to the login form if you are not logged in. This part isn't having any problems.

The problem is that when the user fills out the login form and logs in, the view does change to the main view, but it does not receive events (clicking the logout button does nothing.) I know this is not a problem with the view itself, because if the main view is loaded without switching to the login screen, it will detect clicking the logout button.

In one of my controllers:

 launch: function() {
    this.session = localStorage.getItem('session');
    if(!this.session) {
        Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
        Ext.Viewport.add(Ext.create('App.view.Login'));
    }
},

And when the login happens, I switch to the main view like so (which includes the logout button)

Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add(Ext.create('App.view.Main'));
Ext.Msg.alert('Logged In', 'Login successful.');

score 0 · Answer 1 · answered Apr 23 '14 at 21:18

So I found the not obvious at all answer: when defining the events in the controller, I needed to add button before the identifiers, example:

config: {
    refs: {
        loginForm: 'loginForm',
        logoutForm: 'logoutForm'
    },
    control: {
        'button#loginButton' : {
            tap: 'onLogin'
        },
        'button#logoutButton' : {
            tap: 'onLogout'
        }
    }
},

App switching between views

1 Answers1