ExtJS 按条件设置表格行背景色示例

直接查看效果，下面这张图片可以直观地展示实现结果：

以下是一个完整的 HTML 模板，其中预先定义了一个名为 my_row_class 的 CSS 类，背景颜色设为灰色——这个样式将在后续步骤中被动态应用到指定行。

接下来是关键的 JavaScript 代码，核心部分已用横线标记，仔细体会其中的逻辑：

Ext.onReady(function(){ 
Ext.QuickTips.init(); 
Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); 

// sample static data for the store 
var myData = [ 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] 
]; 

/** 
* Custom function used for column renderer 
* @param {Object} val 
*/ 
function change(val) { 
if (val > 0) { 
return '' + val + ''; 
} else if (val < 0) { 
return '' + val + ''; 
} 
return val; 
} 

/** 
* Custom function used for column renderer 
* @param {Object} val 
*/ 
function pctChange(val) { 
if (val > 0) { 
return '' + val + '%'; 
} else if (val < 0) { 
return '' + val + '%'; 
} 
return val; 
} 

// create the data store 
var store = new Ext.data.ArrayStore({ 
fields: [ 
{name: 'company'}, 
{name: 'price', type: 'float'}, 
{name: 'change', type: 'float'}, 
{name: 'pctChange', type: 'float'}, 
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
] 
}); 

// manually load local data 
store.loadData(myData); 

// create the Grid 
var grid = new Ext.grid.GridPanel({ 
store: store, 
columns: [ 
{ 
id :'company', 
header : 'Company', 
width : 160, 
sortable : true, 
dataIndex: 'company' 
}, 
{ 
header : 'Price', 
width : 75, 
sortable : true, 
renderer : 'usMoney', 
dataIndex: 'price' 
}, 
{ 
header : 'Change', 
width : 75, 
sortable : true, 
renderer : change, 
dataIndex: 'change' 
}, 
{ 
header : '% Change', 
width : 75, 
sortable : true, 
renderer : pctChange, 
dataIndex: 'pctChange' 
}, 
{ 
header : 'Last Updated', 
width : 85, 
sortable : true, 
renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
dataIndex: 'lastChange' 
} 
],viewConfig : {forceFit:true 
//------------------------------------------------ 
,getRowClass : function(record,rowIndex,rowParams,store){ 
if("3m Co"==record.get('company')){ 
return 'my_row_class'; 
} 
} 
//------------------------------------------------ 
}, 
stripeRows: true, 
autoExpandColumn: 'company', 
height: 350, 
width: 600, 
title: 'Array Grid', 
// config options for stateful beha vior 
stateful: true, 
stateId: 'grid' 
}); 

// render the grid to the specified div in the page 
grid.render('grid-example'); 
});

核心原理非常直观：在 viewConfig 中挂载 getRowClass 方法，根据当前行数据判断是否需要添加自定义 CSS 类。示例中判断公司名称为 "3m Co" 的行，返回 my_row_class，从而该行背景色变为灰色。你可以举一反三，将判断条件替换为任意字段，样式也可以自由调整为你需要的效果。