Extjs根据条件设置表格某行背景色示例
话不多说，贴上代码
html代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<linkrel="stylesheet"type="text/css"href="../extjs3/resources/css/ext-all.css"rel="externalnofollow"/>
<scripttype="text/javascript"src="../extjs3/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="../extjs3/ext-all.js"></script>
<scripttype="text/javascript"src="array-grid.js"></script>
<styletype="text/css">
.<spanstyle="font-family:Arial,Helvetica,sans-serif;">my_row_class</span><spanstyle="font-family:Arial,Helvetica,sans-serif;">{background:gray;}</span>
</style>
</head>
<body>
<divid="grid-example"></div>
</body>
</html>
js代码,其中应-----隔开的代码即为关键代码，自己分析吧：
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(newExt.state.CookieProvider());
//samplestaticdataforthestore
varmyData=[
['3mCo',71.72,0.02,0.03,'9/112:00am'],
['3mCo',71.72,0.02,0.03,'9/112:00am'],
['AlcoaInc',29.01,0.42,1.47,'9/112:00am'],
['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'],
['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'],
['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'],
['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am']
];
/**
*Customfunctionusedforcolumnrenderer
*@param{Object}val
*/
functionchange(val){
if(val>0){
return'<spanstyle="color:green;">'+val+'</span>';
}elseif(val<0){
return'<spanstyle="color:red;">'+val+'</span>';
}
returnval;
}
/**
*Customfunctionusedforcolumnrenderer
*@param{Object}val
*/
functionpctChange(val){
if(val>0){
return'<spanstyle="color:green;">'+val+'%</span>';
}elseif(val<0){
return'<spanstyle="color:red;">'+val+'%</span>';
}
returnval;
}
//createthedatastore
varstore=newExt.data.ArrayStore({
fields:[
{name:'company'},
{name:'price',type:'float'},
{name:'change',type:'float'},
{name:'pctChange',type:'float'},
{name:'lastChange',type:'date',dateFormat:'n/jh:ia'}
]
});
//manuallyloadlocaldata
store.loadData(myData);
//createtheGrid
vargrid=newExt.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:'LastUpdated',
width:85,
sortable:true,
renderer:Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex:'lastChange'
}
],viewConfig:{forceFit:true
//------------------------------------------------
,getRowClass:function(record,rowIndex,rowParams,store){
if("3mCo"==record.get('company')){
return'my_row_class';
}
}
//------------------------------------------------
},
stripeRows:true,
autoExpandColumn:'company',
height:350,
width:600,
title:'ArrayGrid',
//configoptionsforstatefulbehavior
stateful:true,
stateId:'grid'
});
//renderthegridtothespecifieddivinthepage
grid.render('grid-example');
});