Chapter 3. Events, Components, and Containers
This chapter covers
- Learning about software-driven events with Observable
- Getting to know the Component model and lifecycle
- Exploring the Ext JS Container model
- Managing parent-child relationship of widgets
- Implementing the Container model utility methods
I recall my early days with the Ext framework, when I started learning 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, the reusability of widgets, and how one widget can contain or control another. For instance, how would I make the click of an anchor tag display an Ext Window? Sure, there’s a generic JavaScript way of attaching 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 GridPanel when a row of another GridPanel is clicked? Also, how would I add and remove items dynamically from a Panel? Or how could I find a particular field within a form panel based on the type field?
This chapter is designed to cover these core concepts, which are essential to building rich and interactive user interfaces with the framework. Because we just covered Ext.Element in chapter 2, we’ll leverage this information to set up native click handlers on DOM elements and learn how events flow in the DOM. We’ll also touch on how widget events work from registration to firing the event.