效果图：
源码：
Ext.define('V5.digao.view.Grid', { extend : 'Ext.grid.Panel', columnLines : true, xtype : 'cxbGrid', border : 0, id : 'cxb', viewConfig:{getRowClass:changeRowClass}, store : Ext.create('Ext.data.Store', { fields : ['ywzl','ywdy',"digao", "creator", 'status','wt','gz','jy'], data : [{ 'ywzl':'业务条线1',
........................................................................................................
...........................................................................................................
function changeRowClass(record, rowIndex, rowParams, store){ if(record.get('status') == '未创建'){ return "x-grid-black"; } if(record.get('status') == '草稿'){ return "x-grid-red"; } if(record.get('status') == '审计完成'){ return "x-grid-record-green"; } if(record.get('status') == '审批退回'){ return "x-grid-record-yellow"; } }
设计自定义样式：
tr.x-grid-black .x-grid-td{ background:gray; } tr.x-grid-red .x-grid-td{ background:red; } tr.x-grid-record-green .x-grid-td { background:green; } tr.x-grid-record-yellow .x-grid-td { background: yellow; }
添加自定义样式
<html> <head> <meta charset="utf-8"> <title>V5</title> <link rel="stylesheet" href="../../../extjs/resources/css/ext-all.css"> <link rel="stylesheet" href="../../../rain/resources/css/rain.css"> <link rel="stylesheet" href="../../../resources/default/css/student.css"> <script>var global={user:1,dept:1,audit:false,manager:true,module:'v5.test.student',root:'../../../',server:'127.0.0.1',port:8080,webcontent:'/webapp'};</script> <script src="../../../extjs/ext-all-debug.js"></script> <script src="../../../extjs/locale/ext-lang-zh_CN.js" chars
