EXTJS Grid row coloring failed

I am using extjs 3.2. I just tried one sample for grid row coloring with reference to http://skirtlesden.com/articles/styling-extjs-grid-cells. added grid view config in gridExample.js file which is holding static gird.,

    viewConfig: { 
    stripeRows: false, 
    getRowClass: function(record) { 
        return record.get('age') < 18 ? 'child-row' : 'adult-row'; 
    }

and added CSS in html page.

HTML code is,

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>success</title>
<link href="/testing/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/testing/ext/resources/css/test.css" rel="stylesheet" type="text/css" />
<style>
.child-row .x-grid-cell { 
    background-color: #ffe2e2; 
    color: #900; 
}  
.adult-row .x-grid-cell { 
    background-color: #e2ffe2; 
    color: #090; 
}
</style>
<script src="/testing/ext/adapter/ext/ext-base.js"></script>
<script src="/testing/ext/ext-all.js"></script>
<script src="/testing/JS/gridExample.js"></script>
</head>
<body>
</body>
</html>

But grid row color not changed. Most of forums sure about code. So, is it any problem with css in html page? Thanks in advance.

Solution

Ext 3.x uses CSS classes of the form x-grid3-... for grid elements. You can inspect this 3.2 example's markup to see for yourself.

So, your CSS should be:

.child-row .x-grid3-cell { 
    background-color: #ffe2e2; 
    color: #900; 
}