Striking off the row in ExtJS grid
by Prabhat Rai

Sometimes you need to strike off a row in ExtJS grids, this can be easily done by CSS code.

The CSS code will look like this,

.strike-through-row {

    text-decoration: none;

    background-image: -webkit-linear-gradient(transparent 7px,#6F6B6B 7px,#6F6B6B 9px,transparent 9px);

    background-image: -moz-linear-gradient(transparent 7px,#6F6B6B 7px,#6F6B6B 9px,transparent 9px);

    background-image: -ms-linear-gradient(transparent 7px,#6F6B6B 7px,#6F6B6B 9px,transparent 9px);

    background-image: -o-linear-gradient(transparent 7px,#6F6B6B 7px,#6F6B6B 9px,transparent 9px);

    background-image: linear-gradient(transparent 7px,#6F6B6B 7px,#6F6B6B 9px,transparent 9px);

}

In ExtJS columns declaration we have a function named renderer.

“A renderer is an ‘interceptor’ method which can be used to transform data (value, appearance, etc.) before it is rendered.” (From ExtJS docs).

This function can define CSS classes the cell can have. So in this function we write the following code,

renderer : function (value, meta, record) {

    meta.tdCls = 'strike-through-row';

    return value;

}

and the current cell will be marked as strike off. We can check for any condition and then apply the class for some specific cells as per our requirements.

The result will look something like this,

In this example I am striking off the row only when the age is less than 18 if it is greater than 18 then we don’t strike off the row.

renderer : function (value, meta) {

// Renderer function of age column

    if(value < 18) {

        meta.tdCls = 'strike-through-row';

    }

    return value;

}

You can check also for some other column’s data of the row in renderer function by using the third parameter of the function record.

So if you want to strike off name also depending on age in the above example you can check that in name column’s renderer function as :

renderer : function (value, meta, record) {

// Renderer function of name column

    var data = record.data;

    var age = data['age'];



    if(age < 18) {

        meta.tdCls = 'strike-through-row';

    }



    return value;

}

Happy Coding. 🙂