We are trying to create a custom GridView which renders a container in a div inserted between the grids 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 toolbars 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!