The TaskLogController definition is the most complex controller definition we have yet developed. The definition that follows excludes the refs and init configuration. You can download the full source code from this book's website:
Ext.define('TTT.controller.TaskLogController', {
extend: 'Ext.app.Controller',
views: ['tasklog.ManageTaskLogs'],
stores: ['TaskLog', 'Project', 'Task'],
refs: omitted…
init: omitted…
doAfterActivate: function() {
var me = this;
me.getTaskStore().load();
me.getProjectStore().load();
},
doSelectProject: function(combo, records) {
var me = this;
var rec = records[0];
if (!Ext.isEmpty(rec)) {
me.getTaskCombo().getStore().clearFilter();
me.getTaskCombo().getStore().filter({
property: 'idProject',
value: rec.get('idProject'),
exactMatch: true
});
me.getTaskCombo().setValue(''),
if (me.getTaskCombo().getStore().getCount() === 0) {
Ext.Msg.alert('No Tasks Available', 'There are no tasks assigned to this project!'),
}
}
},
doSelectTaskLog: function(grid, record) {
var me = this;
me.getTaskCombo().getStore().clearFilter();
me.getTaskCombo().getStore().filter({
property: 'idProject',
value: record.get('idProject'),
exactMatch: true
});
me.getProjectCombo().setValue(record.get('idProject'));
me.getTaskLogForm().loadRecord(record);
me.getTaskLogFormFieldset().show();
me.getTaskLogFormFieldset().setTitle('Edit Task Log For ' + record.get('taskName'));
me.getTaskLogForm().getForm().clearInvalid();
me.getDeleteTaskLogButton().enable();
},
doAddTaskLog: function() {
var me = this;
me.getTaskLogFormFieldset().show();
me.getTaskLogFormFieldset().setTitle('Add Task Log'),
var taskLogDate = me.getTaskLogDateField().getValue();
if (Ext.isEmpty(taskLogDate)) {
taskLogDate = new Date();
}
var tl = Ext.create('TTT.model.TaskLog', {
taskDescription: '',
username: TTT.getApplication().getUser().username,
taskLogDate: taskLogDate,
taskMinutes: 0,
idTask: null
});
me.getTaskLogForm().loadRecord(tl);
me.getDeleteTaskLogButton().disable();
var idProject = me.getProjectCombo().getValue();
if (Ext.isEmpty(idProject)) {
var firstRec = me.getProjectCombo().getStore().getAt(0);
me.getProjectCombo().setValue(firstRec.get('idProject'), true);
me.getTaskCombo().getStore().clearFilter();
me.getTaskCombo().getStore().filter({
property: 'idProject',
value: firstRec.get('idProject'),
exactMatch: true
});
me.getTaskCombo().setValue(''),
}
},
doDeleteTaskLog: function() {
var me = this;
var rec = me.getTaskLogForm().getRecord();
Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task log?', function(btn) {
if (btn === 'yes') {
rec.destroy({
failure: function(rec, operation) {
Ext.Msg.alert('Delete Failure', operation.request.scope.reader.jsonData.msg);
}
});
me.doAddTaskLog();
}
});
},
doSaveTaskLog: function() {
var me = this;
var rec = me.getTaskLogForm().getRecord();
if (!Ext.isEmpty(rec)) {
me.getTaskLogForm().updateRecord();
// update the minutes field of the record
var hours = me.getTaskHoursField().getValue();
rec.set('taskMinutes', hours * 60);
var errs = rec.validate();
if (errs.isValid() && me.getTaskLogForm().isValid()) {
rec.save({
success: function(record, operation) {
if (typeof record.store === 'undefined') {
me.getTaskLogStore().add(record);
}
me.getTaskLogFormFieldset().setTitle('Edit Task Log For ' + record.get('taskName'));
me.getDeleteTaskLogButton().enable();
},
failure: function(rec, operation) {
Ext.Msg.alert('Save Failure', operation.request.scope.reader.jsonData.msg);
}
});
} else {
me.getTaskLogForm().getForm().markInvalid(errs);
Ext.Msg.alert('Invalid Fields', 'Please fix the invalid entries!'),
}
}
},
doSearch: function() {
var me = this;
var startDate = me.getStartDateField().getValue();
if (Ext.isEmpty(startDate)) {
Ext.Msg.alert('Start Date Required', 'Please select a valid start date to perform a search'),
return;
}
var endDate = me.getEndDateField().getValue();
if (Ext.isEmpty(endDate)) {
Ext.Msg.alert('End Date Required', 'Please select a valid end date to perform a search'),
return;
}
me.getTaskLogStore().doFindByUser(TTT.getApplication().getUser().username, startDate, endDate);
me.getTaskLogFormFieldset().hide();
}
});The TaskLogController section defines the three stores that are used by the views. The Project and Task stores are loaded in the doAfterActivate function that is triggered when the ManageTaskLogs panel is activated. This ensures that the Task and Project comboboxes have valid data to operate on.
Each ref item defined in the controller is used in one or more functions to access the underlying component and perform an appropriate action. The autogenerated set method for each ref item makes referencing the components in our code easy.
Note
It is important to note that the ref item will always return a single object, so it cannot be used like the Ext.ComponentQuery.query function to retrieve a collection of components. To retrieve objects dynamically (without using refs) or to retrieve a collection of objects, the ComponentQuery.query function should be used. For more information, see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery.
Each possible user action is handled by an appropriately named function. The function arguments will depend on the event source. The click event handler function for a button object will always pass a reference to the button itself as the first argument of the event handler. The grid itemclick event handling function will always receive a reference to the grid itself as the first argument followed by the record that was clicked on. You should examine the Sencha Ext JS 4 docs to become familiar with the event handling function arguments of common components.
Performing a search requires a valid start and end date. The doSearch function will validate the two date fields before allowing a search. Note the use of the TTT.getApplication().getUser() function to access the user who is currently logged in.
A successful search will list the task log records that match the search criteria. A user can then click on an item in the list to load the task log form. This is done in the doSelectTaskLog function.
Adding a new task log will create a new TaskLog model record and load the form. The record will have the currently logged in username property set. The currently selected Project in the project combo is retained if available; otherwise, the first item in the combo is selected.
Selecting a project will filter the task store to only display the tasks assigned to the project. This is achieved in the doSelectProject function:
me.getTaskCombo().getStore().filter({
property:'idProject',
value:rec.get('idProject'),
exactMatch:true
});Note that we are defining an exactMatch on the idProject field. Without this property, partial matches would be returned (for example, filtering with an idProject value of 2 would match a task with an idProject value of 20; a trap for unwary developers!).
The doSaveTaskLog and doDeleteTaskLog functions perform the appropriate actions on the record that was loaded into the task log form. Just like in the previous chapter, the form is used to display and enter data but the data is never submitted. All the save data actions are triggered via the model instance.