方式一（推荐）统一设置行样式（以灰白相间的样式为例）
//xxx.css 样式 该样式在一个css文件中，在index.jsp加载时导入
.x-grid-gray-row {
background-color: #EEEEEE !important;
}
.x-grid-white-row {
background-color: white;
}
//ProductView.js
ProductView.prototype.grid = function() {
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel({
columns : [sm, new Ext.grid.RowNumberer(), ...此处省略.... ]})
grid = new Ext.grid.GridPanel({
store : store,
trackMouseOver : true,
disableSelection : false,
loadMask : true,
autoHeight : true,
cm : cm,
sm : sm,
viewConfig : {
forceFit : true,
enableRowBody : false,
showPreview : false,
//别的代码别看，行样式为下面的代码块
getRowClass: function(record, rowIndex, p, ds) {
if(rowIndex%2==0){
return "x-grid-gray-row";
}else{
return "x-grid-white-row";
}
}//end 灰白相间行样式
},
});
return grid;
};//end grid方式二设置任意的行样式（也可以指定某个特定单元格，这里以灰白相间行为例）
//xxx.css 样式 该样式在一个css文件中，在index.jsp加载时导入
.x-grid-gray-row {
background-color: #EEEEEE !important;
}
.x-grid-white-row {
background-color: white;
}
//
// 1 首先要获取行号
/*显示行号
*CustomerView.js
这里返回的就是当前行号，第一行为 1
*/
CustomerView.getRowNumberer=function(obj){
return new Ext.grid.RowNumberer({
align:'center',
// header:'序号',
// width:35,
autoWidth:true,
renderer:function(value,m,record,rowIndex,columnIndex,store){
//默认第一行 rowIndex=0
obj.rowIndex=rowIndex+1;
obj.store = store;
obj.columnIndex =columnIndex;
obj.value = value;
return '<div align="center" >'+(rowIndex+1)+'</div>';
}
});
};
// 2
CustomerView.prototype.grid = function() {
var sm = new Ext.grid.CheckboxSelectionModel();
var ob = new Object(); //获得行号
var row = CustomerView.getRowNumberer(ob);//返回行
var cm = new Ext.grid.ColumnModel({
columns : [sm, row,
{
header : '客户编号',
width : 110,
dataIndex : 'customerNo',
renderer:function(value,m){ //根据行号进行判断，
if(ob.rowIndex % 2==0 ){
m.css = "x-grid-gray-row";
}esle{
m.css = "x-grid-white-row";
}
return value;
}
},
]})//end cm
...省略若干...
}