Выделяет строку с цветом в сетке - 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' 
       : ''; 
     } 
    } 
}); 

Это будет работать с follwing правила CSS. Обратите внимание на селектор, чтобы поймать выделенные строки (.x-grid-row.highlight без пробелов) и тот факт, что фон применяется к фону TD, а не непосредственно к элементу TR, который не работает.

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

Answer 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' 
    } 
} 
},