ExtJS 4 - Extra border after adding a bottom toolbar

Question

I have an ExtJS4 app with a moderately complex layout consisting of a couple of nested panels, each with layouts of type border. I can't figure out how to get rid of a 'double border' that exists when I add a bottom toolbar to one of the panels.

See the jsFiddle here for an example: http://jsfiddle.net/5fwLz/2/

I'm just trying to figure out how to make the border above 'button' look right. Any help would be greatly appreciated, thanks!

EDIT- Solution I used: http://jsfiddle.net/5fwLz/4/

This is a bit cleaner I think than Akatum's solution below and the borders also maintain a clean look when the south region is made collapsible.

Answer 1

This solution is quite a hack, but it works. You can set border attribute of south border region to false and then by using style attribute define its right, left and top border:

{
    region: 'south',              
    border: false,
    style: {
      borderRight: '1px solid #99BCE8',
      borderLeft: '1px solid #99BCE8',
      borderTop: '1px solid #99BCE8'
    },
    split: true,
    height: '25%'                
}

Edited fiddle is here: http://jsfiddle.net/5fwLz/3/