I'm new to extjs and was wondering if somebody could help with my noob problem.

I have a border layout with a tab panel in the center.
In each tab pane I wish to have a further border layout with west and center panels.
In some of the tab panes I require the accordion in the west panel, but I can't seem to get it to scroll and when expanded, it extends beyond the foot of the west region.

Perhaps it's bad practice nesting the border layouts and columns is the way to go?

Here is the code if somebody could please point me in the right direction or offer a better way to accomplish this.

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