How to change the background-image in the header of a grid?

[disconnect]

How can i change the background-image of the Headercolumn in a grid?

I've seen that it is possible by changing the css.


.x-grid3-header

{

background-image:url(./img/bg-image.jpg);
}

But this setting here is for all grids in the application. My problem is, that i need different looking grids in my application, so i have to change the background-image programmatically.

I've seen some examples in this forum where the background-color of the rows get changed due to a renderer. But is there a similar way to do it for the columnheader?

public

Object render(PatientsOverviewModel model, String property,

ColumnData config, int rowIndex, int colIndex,
ListStore<PatientsOverviewModel> store,
Grid<PatientsOverviewModel> grid) {
config.style = "background-color: blue;";
return model.get(property);

}

In addition i've found the following line in the ColumnHeader.class where the x-grid3-header class is set.

cf.setStyleName(row, col, "x-grid3-header x-grid3-hd x-grid3-cell");

But how can i do this in my custom class?

Thanks in advance for any help

[sven]

You can use css selectors for this.

grid.addStyleName("mycustomstyle");

and than as rule oyu can use

.mycustomstyle .x-grid3-header
{
background-image:url(./img/bg-image.jpg);
}

[disconnect]

Thanks Sven!

This works fine, but only under the following condition i figured out:

There is missing one important information ! @All others who have the same issue please notice the following:

Don't forget to comment out the original settings in the gxt-all.css, because the custom css in mycustomstyle class does not overwrite the original settings in x-grid3-header . It renders the background-image in a div above from the div where the the x-grid3-header is set !!! I wouldn't take effect, because the custom css gets still overwritten by the original css class !

.x-grid3-header

{
/*background-color:#f9f9f9;
background-image:url(../images/default/grid/grid3-hrow.gif);*/

}

[sven]

You should not change gxt-all.css. This makes updating impossible in an easy way. Simple mark your rule as important