In our third example, we will make the center region into something more useful than a panel containing simple HTML.
We will specify the center child component as a TabPanel. TabPanel is a Container, so it has a single child component. A panel with some simple HTML in this case!
The only difference in this example is that the center config object has an xtype which means it will be used to create a TabPanel (instead of the default panel), and it has an items config specifying child panels:
{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Movie Grid',
html: 'Center'
}],
margins: '0 0 0 0'
}
This results in the following display:
 |
The TabPanel class uses a card layout to show only one of several child components at once. Configure it with an activeTab config specifying which one to show initially. In this case it's our 'Movie Grid' panel.
Of course the child component we have configured in our TabPanel is not a grid. Let's add the...