We mentioned that it was a good idea to design your application (starting with the data layer and then moving to the views) so that it's easier to understand the interactions that your controllers will have to deal with. When moving from the design to the code, the same applies, so we will write the user interface for this application and then later wire it up to the data via controllers.

First up, we need a viewport. We only have one page in the CMS, so the viewport is the container for all of the individual subviews (such as the tree and the detail panel). This application is fairly focused, so we're going to put all our views and associated classes under the ArchitectureCms.view.main.* namespace. Here's the code for our ArchictureCms.view.main.Main viewport:

// app/view/main/Main.js
Ext.define('ArchitectureCms.view.main.Main', {

    extend: 'Ext.panel.Panel',
 requires: [
        'ArchitectureCms.view.main.Detail',
        'ArchitectureCms.view.main.Tree'
    ],
   ...