View Full Version : [2.0b1] background color in Grid

23 Oct 2007, 8:07 PM
In Ext 1.1.1, the items in grid have an alternate background. (see 1.1.1.jpg)
However in Ext 2.0b1, I see the examples are all the same background. (see 2.0b.jpg)
What can I do to make an alternate background?

23 Oct 2007, 8:53 PM
Set the configuration option stripeRows (http://extjs.com/deploy/dev/docs/?class=Ext.grid.GridPanel&member=striperows)of Ext.grid.GridPanel to true. The current documentation is incorrect in saying that the default is false. This will be fixed in the next release of docs.

23 Oct 2007, 9:41 PM
Well, I see the configuration, but it still doesn't work. This is my code, could you help me to find the problem?

DataGrid = function(limitColumns){
var columns = [
{id:'property',header: "", width: 160, sortable: false, dataIndex: 'property'},
{header: "", width: 75, sortable: false, dataIndex: 'value'}
var cs = [];
for(var i = 0, len = limitColumns.length; i < len; i++){
columns = cs;
DataGrid.superclass.constructor.call(this, {
stripeRows: true, // already add
store: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'property'},
{name: 'value'}
data: [
columns: columns,
autoExpandColumn: 'property',
Ext.extend(DataGrid, Ext.grid.GridPanel); // Will this be the problem?
contentDataPanel = new DataGrid([0, 1]);

23 Oct 2007, 9:48 PM
Appears that the alternating row color css was commented out when beta1 was released. This is updated in SVN. In the mean time before the release, you can define the color that you would like to use as the row alternate color by including this style after ext-all.css


23 Oct 2007, 10:40 PM
Good job!
It really works!
Thank you for your help! :)

12 Nov 2007, 5:56 AM
I added stripeRows: true option in grid config, everything is ok in ext-all.css but my rows still have same (white) background. I use custom columns renderers, so can they make problem for me?

12 Nov 2007, 6:04 AM
Use Firebug to inspect the css classes of your grid. Does every other row have the css class x-grid3-row-alt?

13 Nov 2007, 4:52 AM
I've used firebugf to inspect grid rows (columns). Every other row has this style 'x-grid3-row x-grid3-row-alt' but every row has same color.
How can I resolve this?

13 Nov 2007, 6:02 AM
When you click on a row with x-grid3-row-alt applied to it you should see that class on the right hand side in firebug and its relevant css.

13 Nov 2007, 6:31 AM
I've inspected it with firebug and row (div) with 'x-grid3-row-alt' applied to it has no 'x-grid3-row-alt' style in right hand side in firebug. What is the problem with it?

13 Nov 2007, 6:37 AM
If you go to the css tab can you find the class there?

14 Nov 2007, 12:48 AM
I'm so sorry cause I was wasting your time cause everything works fine with my grid and alt rows. My graphic card and monitor were poor calibrated so I couldn't see that everything is fine and works perfectly (alternate grid rows rendering).
Once more, I'm so sorry...