Cannot create split region between two panels in extjs - extjs

Question

I have used split: true and it worked until I had the following situation:
centerContent = new Ext.Panel
({
layout: 'border',
split:true,
stateful:true,
border:false,
items:
[
{
region:'center',
margins:'0 0 0 0',
autoScroll:true,
split: true,
items:
[
{
region: 'north',
height: 250,
minSize: 150,
frame:false,
border:false,
layout:'fit',
items: blah
},
{
title:'Graph',
region:'south',
margins:'0 0 0 0',
collapsible: true,
split:true,
frame:false,
border:false,
height: 500,
minSize: 250,
layout:'fit',
items: anotherBlah
}
]
}
]
});
I tried to put split: true everywhere, but still no result. To illustrate the result of this code, I have attached a picture:
The north region has no title, but it renders to the item: blah. South region has title 'Graph' as you can see from the picture. I want to be able to split/drag down south region from north whenever necessary. But that "split tool" will not show up.
Do you know what am I missing?

Answer 1

You can't have border layout and auto scroll in the same container. The reason is that the border layout will fit its children component to the available space, and so they will never overflow.
So, in order to achieve what you want, you need an inner container with a fixed height (so that it overflows its parent) in a container with autoScroll. Then you apply the border layout to that inner container.
Example (jsFiddle):
Ext.widget('container', {
renderTo: Ext.getBody()
// the 300px container contains a 500px child: it will scroll
,width: 300
,height: 300
,autoScroll: true
,items: [{
xtype: 'container'
,height: 500
// the 500px container has border layout
,layout: 'border'
,items: [{
// you are required to have a center region, so use center and south
title: 'Center'
,region: 'center'
,height: 200
},{
title: 'South'
,region: 'south'
,split: true
,height: 300
}]
}]
});