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'
}
}]
});

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

panel3=new Ext.Panel({
title: 'Contacts',
bodyStyle: 'padding:10px',
items: [{ xtype: 'fieldset',
title: 'Current View',
autoHeight: true,
bodyStyle: 'padding:3px',
items: [
{ xtype: 'radio', boxLabel: 'Address Cards',
hideLabel: true, name: 'contacts-view',
checked: true },
{ xtype: 'radio', boxLabel: 'Phone List',
hideLabel: true, name: 'contacts-view' },
{ xtype: 'radio', boxLabel: 'By Category',
hideLabel: true, name: 'contacts-view' },
{ xtype: 'radio', boxLabel: 'By Location',
hideLabel: true, name: 'contacts-view'}]
}]
});

var container=new Ext.Panel({
title: 'Accordion Layout',
width: 200,
height: 350,
applyTo: 'accordion-panel',
// Displays one item at a time in a stacked layout.
layout: 'accordion',
items: [panel1, panel2, panel3]
});
// Expand the root node of the tree.
Ext.getCmp('inbox-tree').getRootNode().expand();