Extjs根据条件设置表格某行背景色示例

话不多说，贴上代码
html代码：

<！DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" rel="external nofollow" /> <script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs3/ext-all.js"></script> <script type="text/javascript" src="array-grid.js"></script> <style type="text/css"> .<span style="font-family: Arial, Helvetica, sans-serif;">my_row_class</span><span style="font-family: Arial, Helvetica, sans-serif;">{ background:gray;}</span> </style> </head> <body> <div id="grid-example"></div> </body> </html>

js代码,其中应-----隔开的代码即为关键代码，自己分析吧：

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 "<span style="color:green;">" + val + "</span>"; } else if （val < 0） { return "<span style="color:red;">" + val + "</span>"; } return val; } /** * Custom function used for column renderer * @param {Object} val */ function pctChange（val） { if （val > 0） { return "<span style="color:green;">" + val + "%</span>"; } else if （val < 0） { return "<span style="color:red;">" + val + "%</span>"; } 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 behavior stateful: true, stateId: "grid" }）; // render the grid to the specified div in the page grid.render（"grid-example"）; }）;