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';
            }
        }
    }
});