extjs grid行背景设置颜色

效果图:


源码:

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值