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.
3.128.226.121