grid 单元格和行变色

在对列表的处理中我们经常要对某些特殊字段或特殊行进行标注，这就需要变色的处理。

定义颜色

<style>    .x-grid-record-red  {        background: #FF0000;    }    .x-grid-record-yellow  {        background: #f1c40f;    }    .x-grid-record-green  {        background: #00B83F;    }

1.对单元格变色处理

{    header: '电压',    dataIndex: 'voltage',    width: 80,    align: 'center',    flex: 1,    renderer: function (value, m) {        if (value > 5) {            m.css = 'x-grid-record-green';            return value        } else if (value <= 5 && value > 4) {            m.css = 'x-grid-record-yellow';            return value        } else if (value <= 4) {            console.log('red');            m.css = 'x-grid-record-red';            return value        }    }}                     

2.对一行记录变色

var smDoorDate = Ext.create('Ext.selection.CheckboxModel', {mode: 'single'});var gridDoorDate = Ext.create('Ext.grid.Panel', {    region: 'center',    columnLines: true,    preventHeader: true,    store: storeDoorDate,    height: 350,    dockedItems: [tbar],    selModel: smDoorDate,    bbar: pagingToolbar,    defaults: {titleAlign: 'center'},    columns: [        Ext.create('Ext.grid.RowNumberer', {text: '行号', width: 50}),        {            header: '电压',            dataIndex: 'voltage',            width: 80,            align: 'center',            flex: 1        }    ],    viewConfig: {//添加视图配置        enableTextSelection: true,
          forceFit:true,//当行大小变化时始终填充满           enableRowBody:true,//可以用两行tr来表示一行数据           showPreview:true,//初始显示预览效果,这个是自定义的属性
           getRowClass: function (record, rowIndex, rowParams, store) {//获得一行的css样式              if (record.data.voltage > 5) {     //正常关闭、责任人原因中止、发起人原因中止                return 'x-grid-record-green';            }            if (record.data.voltage <= 5 && record.data.voltage > 4) {                return 'x-grid-record-yellow';            }            if (record.data.voltage <= 4) {                return 'x-grid-record-red';            }        }    }});