CODEWITHSUNDEEP
cssextjsgridcustomization
user2474622
user2474622

Reputation:

Highlights a line with a color in a grid - ExtJS

I tried to get some custom css to customize my grid in ExtJS. I was struggling with the cls input, but then I found an other way which worked. What I want is to highlight a whole line regarding a value Here is my code in the View : 

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}

and there is my code in 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;  }

For the moment, it works (the id=CC creates the link with the css file). When I pass my mouse over a line or click on a line, the value concerned in the column "Etat" are highlighted in green. I tried the cls method but I didn't succeed to make it work. The main reason, in all the tutorials I found, the classical way to do it is :

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

But in my case, I have :

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

and I don't know where to put the cls attribute. Itried several ways but I always end up with an error.

So here's my two questions : 1- how to highlights the whole line (not only a line from a single column) 2- how to automatically highlight a whole line regarding a value contained in this one ?

Sorry if it's not very clear :s.

Upvotes: 0

Views: 7463

Answers (2)

user2474622
user2474622

Reputation:

Thanks to rixo, here's the code which makes it work !

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

Upvotes: 0

rixo
rixo

Reputation: 25001

You need to provide a getRowClass method in the grid's view configuration. Like this:

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

Here's a complete example on how to do that in class extended from grid panel:

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

That would work with the follwing CSS rule. Note the selector to catch highlighted rows (.x-grid-row.highlight with no spaces), and the fact that the background is applied to background TD, not directly to the TR element, which would not work.

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

Upvotes: 8

Related Questions