Striking off the row in ExtJS grid

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,

Grid Strike off example

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. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s