在网格中用颜色突出显示一条线 - ExtJS答案

【问题标题】：Highlights a line with a color in a grid - ExtJS在网格中用颜色突出显示一条线 - ExtJS
【发布时间】：2013-06-12 15:19:46
【问题描述】：

我尝试获取一些自定义 CSS 来在 ExtJS 中自定义我的网格。我一直在为 cls 输入而苦苦挣扎，但后来我找到了另一种可行的方法。我想要的是突出关于值的整行这是我在视图中的代码：

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'Test ',
store: 'Users',

initComponent: function() {

this.columns = [
   {header: 'ID du CPE', width: 150, dataIndex: 'ID',  flex: 0},
       {header: 'Modèle', dataIndex: 'Modele', flex: 1},
   {header: 'Firmware', dataIndex: 'firmware', flex: 1},
   {header: 'Année MeS', dataIndex: 'annee', flex: 1},
   {header: 'Alerte', dataIndex: 'statut', hidden: true, hideable: false, flex: 0},
   {header: 'Etat', id:'CC', dataIndex: 'alerte', flex: 0, width: 100}

在 CSS 中有我的代码：

.x-grid-table .x-grid-row-selected  .x-grid-cell-CC {
background-color: #1DAE00 !important;  }  
.x-grid-table .x-grid-row-over .x-grid-cell-CC {
background-color: #1DAE00 !important;  }

目前，它可以工作（id=CC 创建与 css 文件的链接）。当我将鼠标移过一条线或单击一条线时，“Etat”列中的相关值以绿色突出显示。我尝试了 cls 方法，但没有成功。主要原因，在我发现的所有教程中，经典的做法是：

Ext.create('Ext.grid.Panel', { 
cls: 'CC',

但就我而言，我有：

Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',

我不知道在哪里放置 cls 属性。尝试了几种方法，但我总是以错误告终。

这是我的两个问题： 1-如何突出显示整行（不仅仅是单列中的一行） 2- 如何自动突出显示关于其中包含的值的整行？

如果不是很清楚，请见谅：s.

【问题讨论】：

标签： css extjs grid customization

【解决方案1】：

您需要在网格的视图配置中提供getRowClass 方法。像这样：

    ,viewConfig: {
        getRowClass: function(record) {
            return record.get('highlight')
                ? 'highlight'
                : '';
        }
    }

这是一个完整的示例，说明如何在从网格面板扩展的类中执行此操作：

Ext.define('My.Grid', {
    extend: 'Ext.grid.Panel'

    ,store: {
        fields: ['foo', 'bar', 'highlight']
        ,proxy: {
            type: 'memory'
            ,reader: 'array'
        }
        ,data: [[1, 'Bar', false],[2, 'Baz', false],[3, 'Bat', true]]
    }

    ,columns: [
        {dataIndex: 'foo', text: "Foo"}
        ,{dataIndex: 'bar', text: "Bar"}
        ,{dataIndex: 'highlight', text: "Highlighted"}
    ]

    ,viewConfig: {
        getRowClass: function(record) {
            return record.get('highlight')
                ? 'highlight'
                : '';
        }
    }
});

这将适用于以下 CSS 规则。请注意用于捕获突出显示行的选择器（.x-grid-row.highlight 没有空格），以及背景应用于背景 TD，而不是直接应用于 TR 元素这一事实，这是行不通的。

.x-grid-row.highlight .x-grid-td {
    background-color: palegreen;
}

【讨论】：

非常感谢，它有效。我会回答我的问题以显示我的新代码，以防有人感兴趣。

【解决方案2】：

感谢 rixo，这是使它工作的代码！

viewConfig: {
getRowClass: function(record) {
    var red = record.get('statut') // shows if a CPE is dead or not (HS = Dead)
    if (red == 'HS') {
    return 'highlight'
    }
}
},

【讨论】：