This chapter has demonstrated how to use individual layouts with Ext JS, however, it's time to bring everything together, combining some of the layouts to create the beginning of a desktop style Ext JS application.
This recipe will start with an
Ext.Viewport to form the basis of a single page web application because it is a component that always expands to fill the browser window. We will then look at using a
BorderLayout and combining it with:
AccordionLayoutin the west region as a main menu
CardLayoutin the center region
VBoxLayout, also in the center panel
Ext.tab.Panelto navigate between screens: