Attaching user interactions to controller actions

Our app.js file contains our Ext.Loader configuration and the application's definition using
the following code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Cookbook',
autoCreateViewport: true,
launch: function(){
console.log('App Launch');
}
});

Ext.define('Cookbook.view.Viewport', {
extend: 'Ext.container.Viewport',
initComponent: function(){
Ext.apply(this, {
layout: 'fit',
items: [Ext.create('Cookbook.view.LoginForm')]
});
this.callParent(arguments);
}
});

The LoginForm view extends the Ext.form.Panel class and contains a Username and
Password field and a Login button:
Ext.define('Cookbook.view.LoginForm', {
extend: 'Ext.form.Panel',
initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'textfield',
name: 'Username',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
inputType: 'password',
name: 'Password',
fieldLabel: 'Password'
}, {
xtype: 'button',
text: 'Login',
action: 'login'
}]
});
this.callParent(arguments);
}
});

1. We start by creating a controller that will contain our login logic. We do this by
creating a file in our controller folder called Main.js and define a class called
Cookbook.controller.Main extending from the Ext.app.Controller class:
Ext.define('Cookbook.controller.Main', {
extend: 'Ext.app.Controller',
});

2. Next we add the init method to our controller, which will be executed when the
controller is loaded:
Ext.define('Cookbook.controller.Main', {
extend: 'Ext.app.Controller',
init: function(){
console.log('Main Controller Init');
}
});

3. Add a configuration option called controllers to our application definition, located
in our app.js file. This will tell our application that we have a controller called Main
to load and initialize:
Ext.application({
name: 'Cookbook',
autoCreateViewport: true,
controllers: ['Main'],
launch: function(){
console.log('App Launch');
}
});

4. Now that our controller is being initialized, we can hook up the Login
button's click event to an action. We start by creating an action method
called onLoginButtonClick in our Main controller and simply output
a console message:
...
onLoginButtonClick: function(){
console.log('Log me in!');
}
...

5. Now, in our Main controller's init method we use the control method to attach
this action method to the Login button's click event:
...
init: function(){
console.log('Main Controller Init');
this.control({
'button[action=login]': {
click: this.onLoginButtonClick,
scope: this
}
});
}
...

...
refs: [{
ref: 'usernameField',
selector: 'textfield[name=Username]'
}, {
ref: 'passwordField',
selector: 'textfield[name=Password]'
}]
...

onLoginButtonClick: function(){
console.log('Log me in!');
console.log(this.getUsernameField().getValue());
console.log(this.getPasswordField().getValue());
}