Using a tabbed look

A tabbed GUI is modeled on the traditional card tabs or card indexes. It makes your screens easier to understand and navigate, and gives the application a more natural look. This recipe helps you to build a panel with three tabs, as shown in the following screenshot:

How to do it...

1. 1. Create the tabs. Each tab is simply a Ext.Component, such as a panel:

   var tab1={
   title: 'First Tab',
   html: 'Content for the first tab'
   };
   var tab2={
   title: 'Second Tab',
   html: 'Content for the second tab'
   };
   var tab3={
   title: 'Third Tab',
   html: 'Content for the third tab'
   };
   

2. 2. What's left is to put the tabs in their containers:

   var tabPanel=new Ext.TabPanel({
   title: 'Tab Panels',
   width: 400,
   height: 300,
   applyTo: 'tab-panel',
   // Each tab is just a panel managed by the card layout.
   items: [tab1, tab2, tab3],
   activeItem: 0,
   defaults: {bodyStyle:'padding:5px'}
   });
   

How it works...

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