Stacking items with an accordion layout

Countless applications use a layout where multiple panels are positioned in an expandable accordion style, such that only one panel can be open at any given time. This recipe is a sample that tries to borrow the look of popular email applications to explain how to configure and use an accordion layout.

How to do it...

1. 1. Create the Mail panel:

   panel1=new Ext.Panel({
   title: 'Mail',
   items: [{
   xtype: 'treepanel',
   id: 'inbox-tree',
   autoScroll: true,
   animate: true,
   enableDD: true,
   containerScroll: true,
   border: false,
   dataUrl: 'mail-folders.php',
   root: {
   nodeType: 'async',
   text: 'MailBox',
   draggable: false,
   id: 'mailbox'
   }
   }]
   });
   

2. 2. Create the Calendar panel:

   panel2=new Ext.Panel({
   title: 'Calendar',
   bodyStyle: 'padding:10px',
   items: [{ xtype: 'datepicker',
   style: 'border:0'
   }]
   });
   

3. 3. Create the Contacts panel:

   panel3=new Ext.Panel({
   title: 'Contacts',
   bodyStyle: 'padding:10px',
   items: [{ xtype: 'fieldset',
   title: 'Current View',
   autoHeight: true,
   bodyStyle...