Code:
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout:"border",
items:[{
region:"center",
id:"center",
title:"",
layout:"fit",
//border:false,
items:[{
xtype:"tabpanel",
activeTab:0,
border:false,
items:[{
xtype:"panel",
title:"Overview",
layout:"fit",
hideBorders:true,
items:[{
layout:"border",
//hideBorders:true,
items:[{
region:"center",
title:"Stuff",
hideBorders:true
},{
region:"west",
id:"overview-west",
title:"Menu",
width:180,
minWidth:180,
maxWidth:180,
split:true,
collapsible:true,
hideBorders:true,
items:[{
layout:"accordion",
layoutConfig:{
animate:true,
autoWidth:true,
fill:true,
titleCollapse:true
},
items:[{
title:"One",
autoHeight:true,
border:false,
html:"<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.</p>"
},{
title:"Two",
autoHeight:true,
border:false,
html:"Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
},{
title:"Three",
autoHeight:true,
border:false,
html:"Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
},{
title:"Four",
autoHeight:true,
border:false,
html:"Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
}]
}]
}]
}]
},{
xtype:"panel",
title:"Tab 2"
},{
xtype:"panel",
title:"Tab 3"
},{
xtype:"panel",
title:"Tab 4"
}]
}]
},{
region:"north",
id:"north",
title:"North",
height:100,
minHeight:100,
maxHeight:100,
collapsible:true
},{
region:"south",
id:"south",
title:"South",
height:50,
minHeight:50,
maxHeight:50
}]
});
})