Bold Keyword Display in GridPanel Texts

[sideeque]

I have a GridPanel which displays search result for the Key Word entered in TextField.

I want to Bold the keyWord text displayed in Grid panel. I dont want to bold complete search result text in Grid.

Is there anyway or properties with GridPanel of Ext JS helps?

[Condor]

You will have to write one or more column renderers that puts something like <span class="search-result">...</span> around the searched text.

[sideeque]

But each row text is dynamically created based on the data in database. But all the result will have some keyword.

For example: I am searching for key word "coffee"..... The result will be like

The coffee is the best one
The coffee is better than other coffee
Coffee is good


How do I make this coffee as BOLD on each row?

[Condor]

Something like:

var regexp = new RegExp('coffee', 'gi'),
    renderer = function(v) {
        return String(v).replace(regexp, '<span class="search-result">$1</span>');
    },
    col = grid.getColumnModel().getIndexById('id-of-column');
grid.getColumnModel().setRenderer(col, renderer);
grid.getView().refresh();

with css:

.search-result {font-weight: bold;}

[sideeque]

This Works. Thanks for your help!