突出显示网格中带颜色的线条 - ExtJS

Question

我试图获得一些自定义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.

Answer 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;
}