Nested components

The Ext.Img component can be used to insert an image into the Ext JS handled lifecycle. For example the class makes it easy to change the source of the image container.

Exercise

• (Re-)open your index.html and extend the Ext.container.Viewport items by the following snippet:

  component-image.js

{
    region: 'north',
    collapsible: false,
    height: 60,
    border: false,
    bodyPadding: 5,
    items: [{
        xtype: 'image',
        src: './materials/ext-logo.png',
        height: 50
    }]
}

• Reload the page in the browser and take a look at the result: