PDA

View Full Version : Bold Keyword Display in GridPanel Texts



sideeque
13 Oct 2010, 6:15 AM
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
13 Oct 2010, 6:21 AM
You will have to write one or more column renderers that puts something like <span class="search-result">...</span> around the searched text.

sideeque
13 Oct 2010, 6:36 AM
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
13 Oct 2010, 6:44 AM
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
13 Oct 2010, 8:24 AM
This Works. Thanks for your help!