PDA

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



fabito
14 Jul 2010, 2:21 PM
Hi,

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(){
Ext.ux.grid.custom.GroupingView.superclass.renderUI.call(this);
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!
Fábio

21461
21462
21463

sumit.madan
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:
http://www.sencha.com/forum/showthread.php?94762-share-ExtJS-hack-Add-multiple-toolbars-to-a-Panel&p=451950#post451950