ExtJS highlight words in grid row till word is changed

Question

i am using this code to mark special words in a 2 column grid row

gridRow.childNodes[1].firstChild.innerHTML = '<span class ="highlightClass">' + word+ '</span>';

Now everytime when I click inside the row, the word is not marked anymore because div is changing.

The expected behavior is, that the word is still marked till I am changing it.

Would be great, when someone could help me.

Thank you in advance

Answer 1

You can easily highlight words with the HTML tag <mark>.

Just to give you a quick direction, you could define a renderer for your two columns where you look for a precise word/s and replace/mark em with a regular expression.

For example, to highlight all the occurrences of the word "apple" in a column, you could define its renderer like below:

renderer: function (value, metaData, record) {                                        
      var wordToHighlight = "world";
      return value.toString().replace(new RegExp(wordToHighlight , "ig"), "<mark>$&</mark>"));
}           

So...

...something like "Orange Apple Pineapple" will be rendered as "Orange <mark>Apple</mark> Pineapple"