About containers

At this point, we know all the steps of the lifecycle. If you remember, in the rendering phase there's a step where the children of the components are rendered too. Now we're going to learn about containers and how we can add children to a component.

The Ext.container.Container class is responsible for managing children and to arrange those using layouts. If we want our class to contain other components, we should extend from this class. It's worth saying that this class extends from Ext.Component, so we'll be able to use the component lifecycle in our subclasses too:

All classes that extend Ext.Container will be able to have children using the items property or use the add method to append a new component as a child. Let's check out the following code snippet:

Ext.define("MyApp.sample.MyContainer",{
  extend: "Ext.container.Container",   //Step 1
  border: true,
  padding: 10,
  initComponent: function(){
    var me = this;
    Ext.each(me.items,function(item){  //Step 2
...