The 3T administration interface allows a user to maintain company, project, and task relationships. As the relationship is hierarchical, we will be working with one of the most versatile components in Ext JS: Ext.tree.Panel.
The interface we will be building looks like the following screenshot:
Selecting an item in the tree will display the appropriate record on the panel to the right, while the Add New Company button will allow the user to enter the name of a new company. Let's now examine these actions in detail.
There are three different entities that may be edited (company, project, and task), with the preceding screenshot showing the company. Selecting a project in the tree will display the Edit Project form:
Selecting a task will display the Edit Task form:
Selecting the Add New Company button will display an empty company form:
Note that the Delete and Add Project buttons are disabled. When an action is not allowed, the appropriate button will be disabled in all the screens. In this situation, you cannot add a project to a company that has not yet been saved.
The tree tools will allow the user to expand, collapse, and refresh the tree:
When the user first displays the administration interface, the Add New Company screen is shown. When any item is deleted, the Please select an item from the tree… message is displayed:
Now that we have defined the interfaces and their behavior, it is time to define our views.