extjs grid行背景设置颜色

冷不防 2022-09-26 01:45 283阅读 0赞

效果图：

![Center][]

源码：

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',

........................................................................................................

...........................................................................................................

设计自定义样式：

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

[Center]: /images/20220717/8b9bf0f780334c878882d998fa3bfd11.png