View Full Version : Customizing GridView - inserting toolbars between grid column headers and grid rows

14 Jul 2010, 2:21 PM

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!


14 Jul 2010, 10:05 PM
If positioning is not right, then try using other layouts. This post below shows anchor and vbox layouts in toolbars: