The TTT.controller.AdminController ties together the views and implements the many actions that are possible in this user interface. You must download the source code to see the complete definition of this controller as it is not reproduced completely within the following text.
The AdminController has references to the four stores required for processing actions. Each store is reloaded after an update or delete action to ensure the store is in sync with the database. For multiuser applications, this is an important point to consider; can view data be changed by a different user during the lifetime of a session? Unlike the task log interface, where data belongs to the user in the session, the 3T administration module may be actively used by different users at the same time.
Note
It is beyond the scope of this book to discuss strategies for data integrity in multiuser environments. This is usually achieved through the use of per record timestamps that indicate the last update time. Appropriate logic in the service layer would test the submitted record timestamp against the timestamp in the database and then process the action accordingly.
There is one store and model that is yet to be fully defined; we will do so now.
The Company model was first defined using Sencha Cmd in Chapter 9, Getting Started with Ext JS 4, but we now need to add the appropriate proxy and validations. The full definition is as follows:
Ext.define('TTT.model.Company', {
extend: 'Ext.data.Model',
fields: [
{ name: 'idCompany', type: 'int', useNull:true },
{ name: 'companyName', type: 'string'}
],
idProperty: 'idCompany',
proxy: {
type: 'ajax',
idParam:'idCompany',
api:{
create:'company/store.json',
read:'company/find.json',
update:'company/store.json',
destroy:'company/remove.json'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
allowSingle:true,
encode:true,
root:'data',
writeAllFields: true
}
},
validations: [
{type: 'presence', field: 'companyName'},
{type: 'length', field: 'companyName', min: 2}
]
});The Company store will load all the company records through the company/findAll.json URL as follows:
Ext.define('TTT.store.Company', {
extend: 'Ext.data.Store',
requires: [
'TTT.model.Company'
],
model: 'TTT.model.Company',
proxy: {
type: 'ajax',
url: 'company/findAll.json',
reader: {
type: 'json',
root: 'data'
}
}
});The Company model and store are our simplest definitions to date. We will now examine the core actions in our AdminController.
The three stores that are required for 3T administration are loaded when the ManageTasks panel is activated. This will ensure that valid records are available in each store when selecting an item in the tree. The doAfterActivate function can be used for initializing the state of any components belonging to the AdminController. This is especially useful when configuring the drag-and-drop action at the end of this chapter.
Note that we are adding the append listener to the tree store view and assigning the doSetTreeIcon function. It is not possible to do this in the init function control config as the view is not yet configured and ready at this point in time. Assigning the doSetTreeIcon function to the listener after the activation ensures the component is fully configured. The doSetTreeIcon function dynamically assigns an iconCls class to each node depending on the node type.
The final step in the doAfterActivate function is to load the tree store to display the data in the tree.
The doSelectTreeItem function is called when a user selects an item in the tree. The node ID is retrieved and split to allow us to determine the type of node:
var recIdSplit = record.getId().split('_'),For each node, the primary key value is determined and used to retrieve the record from the appropriate store. The record is then loaded into the form, which is then set to be the active item in the admin card's layout.
Each save function retrieves the record from the form and updates the record with the form values. The record is saved if the validation is successful and the form updated to reflect the changing button state. The store that owns the record is then reloaded to sync with the database.
Each delete function confirms the user action before calling the destroy method of the model. If successful, the active item in the admin card's layout is set to display the default message: Please select an item from the tree. If the deletion was not successful, an appropriate message is displayed to inform the user.
The Add buttons are on the form that is the parent for the Add action. You can only add a project to a company or add a task to a project. Each doAdd function retrieves the parent and creates an instance of the child before loading the appropriate form. Buttons on the child form are disabled as needed.