We are now ready to define the MainController that will be used to process the core application actions. These include logging on, logging off, and clicking on the header buttons to display the different management panels in the main content area.
The MainController.js definition is as the following code:
Ext.define('TTT.controller.MainController', {
extend: 'Ext.app.Controller',
requires: ['Ext.window.MessageBox'],
views: ['TTT.view.MainHeader', 'TTT.view.MainCards', 'TTT.view.LogonWindow'],
refs: [{
ref: 'mainCards',
selector: 'maincards'
}, {
ref: 'usernameField',
selector: 'logonwindow textfield[name=username]'
}, {
ref: 'passwordField',
selector: 'logonwindow textfield[name=password]'
}],
init: function(application) {
this.control({
'mainheader button': {
click: this.doHeaderButtonClick
},
'logonwindow button': {
click: this.doLogon
}
});
},
doHeaderButtonClick: function(button, e, options) {
var me = this;
if (button.itemId === 'userAdminBtn') {
me.getMainCards().getLayout().setActiveItem('manageUsersCard'),
} else if (button.itemId === 'taskAdminBtn') {
me.getMainCards().getLayout().setActiveItem('manageTasksCard'),
} else if (button.itemId === 'taskLogsBtn') {
me.getMainCards().getLayout().setActiveItem('taskLogCard'),
} else if (button.itemId === 'logoffBtn') {
me.doLogoff();
}
},
doLogon: function() {
var me = this;
if (me.getUsernameField().validate() && me.getPasswordField().validate()) {
Ext.Ajax.request({
url: 'ttt/security/logon.json',
params: {
username: me.getUsernameField().getValue(),
password: me.getPasswordField().getValue()
},
success: function(response) {
var obj = Ext.JSON.decode(response.responseText);
if (obj.success) {
TTT.getApplication().doAfterLogon(obj.data);
} else {
Ext.Msg.alert('Invalid Logon', 'Please enter a valid username and password'),
}
}
});
} else {
Ext.Msg.alert('Invalid Logon', 'Please enter a valid username and password'),
}
},
doLogoff: function() {
Ext.Msg.confirm('Confirm Logout', 'Are you sure you want to log out of 3T?', function(button) {
if (button === 'yes') {
Ext.Ajax.request({
url: 'ttt/security/logout.json',
success: function() {
window.location.reload();
}
});
}
});
}
});The MainController is responsible for managing three views as defined in the views configuration array: MainHeader, MainCards, and LogonWindow. Each ref defines a component that is needed by the controller to perform an action. The ref value is used during initialization of the controller to automatically create a getter function that can be used to access the component. In our MainController the ref value mainCards will result in a getMainCards function being created. This function is used in the doHeaderButtonClick function to access the MainCards component.
The MainController.init() function calls the control() function to configure event handling in the views. The control() function is a convenient method to assign a set of event listeners in one action. The mainheader button selector configures the click event on all button objects in the MainHeader. Whenever a button in the header is clicked the doHeaderButtonClick function is called. This function will then determine which button has been clicked by examining the itemId of the button argument. The appropriate card in the MainCards is then activated.
The logonwindow button selector configures the click event on the Logon button of the LogonWindow. The doLogon function is called when the button is clicked to trigger the logon process. This function validates the username and password fields and, if both are valid, submits an AJAX request to authenticate the user. A successful logon will then call the TTT.getApplication().doAfterLogon() function passing the user JSON data as the argument.
The doLogoff function is triggered when the user clicks on the Logout button in the header. A prompt is presented to the user and if confirmed the logout action is processed. This will clear the session in the backend before reloading the browser window and presenting the user with the LogonWindow once again.