Chapter 5. Organizing Components

When building an application, many developers struggle with how to organize their UI and which tools to use to get the job done. In this chapter, you’ll gain the necessary experience to be able to make these decisions in a more educated manner. We’ll explore all of the numerous layout models and identify some of the best practices and common issues that you’ll encounter.

The layout management schemes are responsible for the visual organization of widgets onscreen. They include simple layout schemes such as Fit, where a single child item of a Container will be sized to fit the Container’s body, or complex layouts such as a BorderLayout, which splits a Container’s content body into five manageable slices, or regions.

When exploring some of the layouts, we’ll hit upon examples that are verbose, and thus lengthy, and can serve as a great springboard or starting point for your layout endeavors. We’ll start our journey with taking a look at the ContainerLayout, which is the nucleus of the entire layout hierarchy.

5.1. The simple ContainerLayout

As you may recall, the ContainerLayout is the default layout for any instance of Container and places items on the screen, one on top of another. I like to think of it as the Lincoln Logs of the Ext layouts.

5.2. The AnchorLayout

5.3. The FormLayout

5.4. The AbsoluteLayout

5.5. Making components fit

5.6. The AccordionLayout

5.7. The CardLayout

5.8. The ColumnLayout

5.9. The HBox and VBox layouts

5.10. The TableLayout

5.11. The BorderLayout

5.12. Summary