After you build your tabs, use an Ext.TabPanel as their container. The TabPanel class displays one tab at a time using the CardLayout layout manager.

When using TabPanel, each child component fires events that only exist for tabs: activate and deactivate.

Tab panels can also be rendered from pre-existing markup, either already structured as a TabPanel, or from different elements within the page by ID, regardless of page structure. For example, based on the following markup:

<div id="my-tabs" style="width:400px;margin:10px;"></div>
<div id="tab1" class="x-hide-display" style="height:200px">A simple tab</div>
<div id="tab2" class="x-hide-display" style="height:200px">Another one</div>

You need to add the following code to create a tab panel similar to the one in the next screenshot:

var tabPanel=new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
items: [
{ contentEl: 'tab1', title: 'Tab 1' },
{ contentEl: 'tab2', title: 'Tab 2' }
]
});