PDA

View Full Version : Changing the background of a Grid



raymond.larsen
31 Jul 2009, 10:49 AM
Is it possible to set the background of the whole grid using an image? I've tried things like adding style name and setting style attributes, but nothing has worked so far. Any help is greatly appreciated.

Also is there a way to change the background color from the silver/gray to another color or image of the column headings of the grid?

I forgot to add, I'm using Ext Gwt 2.0 with Gwt 1.6.

Arno.Nyhm
6 Aug 2009, 1:18 AM
yes that is possible.

this lines you can overwrite like this



.mycustomclassname .x-grid3-row-alt {
background-color:#FAFAFA;
}

.mycustomclassname .x-grid3-row {
border-color:#FFFFFF #EDEDED #EDEDED;
}place it in a own css file and load it after the original css.

sometimes you need also to add "!important!" at the of the line:


background-color:#FAFAFA !important;



post your custom css code and how you set your mycustomclassname to the grid. maybe there is the problem.

raymond.larsen
6 Aug 2009, 5:52 AM
Here's the code I was trying to use:


ColumnModel cm = new ColumnModel(configs);
listGrid = new Grid<DataViewModel>(emptyStore, cm);
listGrid.setBorders(true);
listGrid.setAutoHeight(true);

// listGrid.setWidth(400);

listGrid.getView().setForceFit(true);
listGrid.setStyleAttribute("border", "2px dashed green"); <== this works
listGrid.setStyleName("lm-GridContainer"); <== this is not changing the background color
this.add(listGrid);

I also tried: listGrid.setStyleAttribute("background-color", "green");
This did not work either. I also tried background instead of background-color. Nothing from the code side worked.

The CSS is as follows:

.lm-GridContainer {
background: url(../images/list_background_tb.png) no-repeat top center !important;
}

The image is in the correct location as I can use this same line and it works for a LayoutContainer widget.

Thank you for your help. I tried the CSS changes you suggested, see below. I put them into my project's custom CSS file, which is listed after the gxt-all.css file. But at last, this did not work either. This grid shows up with its white (near white) background and grayish column headers.

.lm-grid .x-grid3-row-alt {
background-color:#FF1166 !important;
}
.lm-grid .x-grid3-row {
border-color:#FFFFFF #EDEDED #EDEDED;
}

Can you see something that I've missed or don't understand?

Arno.Nyhm
10 Aug 2009, 3:18 AM
i added this to my css (i changed the order and removed the !important):



.lm-grid .x-grid3-row {
border-color:#FFFFFF #EDEDED #EDEDED;
background-color:#FF0000;
}

.lm-grid .x-grid3-row-alt {
background-color:#FF1166;
}
and this to the grid:


final Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setStripeRows(true); // enable alternate rows
grid.addStyleName("lm-grid");
and it works (see attachement)

to have it completely good looking you have also to patch the styles for x-grid3-row-over and x-grid3-row-selected


Note1: you need the same stylename in addStylename and in the CSS!
Note2: you can easy use FireBug to look into the used css and inspect every item of the grid.