We are trying to create a custom GridView which renders a container in a div inserted between the grid´s column headers and rows. Our goal is to have 2 toolbars below the column headers.
In order to achieve this we extended the GroupingView class and overrode the renderUI function. Then we created a div to wrap the container with the toolbars. Exactly like this:

renderUI: function(){
	var el = Ext.get(this.el);
	var header = Ext.get(el.dom.firstChild);
	var extraHeader = Ext.DomHelper.insertAfter(header.dom.firstChild, '<div>', true);
	var extraHeaderContainer = new Ext.Container({
	    items: this.items,
	    renderTo: extraHeader
This solution works fine on Google Chrome but its not working neither on IE nor FF. The toolbar´s buttons (right aligned) are sent off screen and the texts (left) posiotioning are a mess - see attached screenshots for more details.
Given that I have two question:

1) Any clue on what could be happening with the solution above?
2) Anyone knows an easiest or simplest way to achieve this?

Thanks in advance!