The login view is a window centered in the screen that contains a number of fields. Their values are bound to a login object on the view model, as shown in the following code:
Ext.define('Postcard.view.login.Login',{
extend: 'Ext.window.Window',
xtype: 'login-window',
title: 'Login to Postcard',
closable: false,
autoShow: true,
controller: 'login',
viewModel: 'login',
items: [{
xtype: 'textfield',
name: 'e-mail',
bind: '{login.e-mail}',
fieldLabel: 'E-mail',
allowBlank: false
}, {
xtype: 'textfield',
bind: '{login.password}',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'checkbox',
bind: '{login.rememberMe}',
fieldLabel: 'Remember Me?'
}],
buttons: [{ text: 'Login' }]
});Note the controller and ViewModel configuration options and the prefix of the bind values that links to the login object on the view model. Speaking of which:
Ext.define('Postcard.view.login.LoginModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.login',
data: {
login: {}
}
});Nothing is happening here other than defining this login object. Let's move on to the view controller:
Ext.define('Postcard.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',
listen: {
component: {
'button': {
click: function() {
window.localStorage.setItem('loggedin', true);
this.redirectTo('home'),
}
}
}
}
});The view controller does nothing more than listen for the click event on the login form's button and then fake a successful login. For simplicity, this application doesn't do any validation of user details, so we just instantly fire a redirect to the home route.
We saw earlier that the root controller handles the home token, which removes the login view and creates the main view. Let's move on and take a look at that now.