PDA

View Full Version : A XTemplate question...



karieanis
12 Sep 2008, 11:36 PM
Hi guys.

I'm using a combobox/store for a live search in an application, and basically what I want to do is highlight the search text in the appropriate fields of my XTemplate when it is rendered in the dataView that combobox creates on expand.

For example: Say i'm searching for the name 'wood', and I get a few responses...

Wood, Alan
Wood, Jeff
Kirkwood, Peter
Peterwood, Lils

I'd like the word 'wood' underlined, and also bold when the XTemplate is rendered. My first thought is creating a member function to do this, however, I need to access the search value to match against the record values and that isn't in the scope of the template.

Thanks for any help :)

Animal
13 Sep 2008, 12:32 AM
As a first idea, do some string manipulation in an implementation of

http://extjs.com/deploy/dev/docs/?class=Ext.DataView&member=prepareData

Put <span class="combo-match-text> ... </span> round the matched text, and then create the stylesheet rule.

karieanis
1 Oct 2008, 8:50 PM
It's taken me awhile to finally get around to trying this, but now I have, i've found the following problem:

The matched data has had the tags applied to it to highlight the searched for word, however, the records in the store now have the tags also - i'd prefer not to change the data in the store if possible.

In DataView config:


prepareData: function(data)
{
if(this.selectedValue!=null)
{
for(var prop in data)
{
data[prop] = this.highlightSearchedWord(this.selectedValue,data[prop]);
}
}

return data;
}
Highlight function:


highlightSearchedWord: function(searchFor, stringToSearch)
{
var pos = stringToSearch.toLowerCase().indexOf(searchFor.toLowerCase());

// if pos is not -1, a match has been found
if(pos!=-1)
{
var replace = stringToSearch.substring(pos,pos+searchFor.length);
stringToSearch = stringToSearch.replace(replace, '<span style="text-decoration:underline; font-weight:bold;">'+replace+'</span>');
}

return stringToSearch;
}
Any suggestions?

Animal
1 Oct 2008, 11:27 PM
Yes. Do not modify the data.

Just create the prepared data to return from that function, but leaver the Record unmodified.

karieanis
2 Oct 2008, 1:29 PM
Okay, the penny just dropped there... sometimes I forget javascript isn't php :P

Thanks.