Chapter 3. Components and containers

 

This chapter covers

  • Getting to know the Component model and life cycle
  • Exploring the Ext JS Container model
  • Managing parent-child relationships of widgets
  • Implementing the Container model utility methods

I (Jay) recall my early days with the Ext framework, when I learned by toying with the examples and reading the API documentation. I spent many hours on some of the most important core UI concepts, such as adding user interaction, reusing widgets, and understanding how one widget can contain or control another. For instance, how would I make clicking an anchor tag display an Ext window? Sure, there’s a generic JavaScript way to attach an event handler, but I wanted to use Ext JS. Likewise, I needed to know how to get widgets to communicate with each other. For example, how would I reload a grid panel when a row of another grid panel was clicked? Also, how would I add child items dynamically to and remove them dynamically from a panel? How could I find a particular field within a form panel based on the type field?

In this chapter you’ll explore the deep caverns of the fundamental UI building block, the Component class, and learn how it serves as the central model for all UI widgets by implementing a template for standard behaviors known as the component life cycle.

3.1. The Component model

3.2. The component life cycle

3.3. Containers

3.4. Querying for components

3.5. The viewport container

3.6. Summary