Application state

First up is routing. We said in Chapter 6, Practical – Monitoring Dashboard, that the route is a way of keeping part of the application's state in the URL. Another way of looking at this is that as the application changes through its various states, you are walking through the screens that the user would see as they interact with the interface.

By working out the various high-level states of our application, we can better visualize the user flow and establish the routes that we can employ in our code.

Home screen/initial load

This is displayed straight after login and represents the default state of the main screen of the application before the user interacts with it. It looks as follows:

 Route: /#home

The views will have the following state:

view.threads.Main.activeItem = 'threads'

If we're in portrait view, we'll use a card layout.

Note

"Card" is one of the build-Ext JS layouts, which allows you to easily switch out one component for another. It's also the basis for the Ext.TabPanel...