At this point, we are going to go through an exercise to create the main menu for our final application. As of yet, we haven't worked so much on the application itself, mainly because you have been learning the basics about the Ext framework, but from now on, we can focus more on small pieces that will be reused for our final app.
The following screenshot shows how we need to design the main menu for our invoice management application:
Note
Sencha Architect is very useful for creating prototypes quickly and also for screen examples/wire framing. The previous screenshot was created on Sencha Architect version 3.1.x using the classic theme for a better understanding of how the components are to be placed.
As we can see from the screenshot, we need to create a toolbar docked at the top and another toolbar docked on the bottom. The first toolbar will contain two buttons (each one with its own menu) and one text item, Ext.toolbar.TextItem, for displaying the username...