Chapter 5. Exploring layouts
This chapter covers
- Using layout systems
- Exploring the Layout class inheritance model
- Understanding the Card layout
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 an educated manner. We’ll start by introducing component layouts that are new to Ext JS 4 and go on to explore the numerous container layout models and identify best practices as well as common issues you’ll encounter.
The container 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, and complex layouts such as the Border layout, which splits a container’s content body into five manageable slices or regions.
We’ll have some lengthy explorations of container layouts accompanied by some long examples that can serve as a great springboard for your own layouts. But before we continue our journey with in-depth descriptions of each container layout management scheme, let’s talk about how layout managers work and introduce the new component layouts.