View Full Version : Combobox filter any match with color

24 Jul 2012, 12:11 AM
Hi guys!

I just want to know is there a way to do filtered combobox with color. I have done filtered combo with any match, but i need to highlight the searched text in red. I want to have something like in picture:
I was trying to do this in combobox listConfig overriding getInnerTpl function but have some problem and can't achive this.
Here is my test case on fiddle http://jsfiddle.net/ryrmS/15/
Any help appreciated. Thanks.

25 Jul 2012, 5:44 AM
Can someone give me direction to dig around?

25 Jul 2012, 9:05 AM
Does the live example search help in this case? search values are colored in grid cell.


25 Jul 2012, 11:32 PM
I think no. Because in grid we have renderer function in which we can do some things (call another function, and having full controll of the showing value).
But in combo there I find only tpl option to change output. I have the folowing:

listConfig: {
getInnerTpl: function() {
var matchValue = me.down('#country').getValue();

return '{[values.country.replace(/a/g, "<span style=\'color: red\'>a</span>")]}';
//return '{[values.country.replace(/"+matchValue +"/g, "<span style=\'color: red\'>"+matchValue +"</span>")]}';//this not works

But it replace static char "a" to red char "a". And I need to replace it with combo.getValue() text. And it seems that this tpl compile only one time and inside tpl i can't get thought to the new combo value for update tpl dynamic.

9 Aug 2012, 12:55 AM
Finally i have found a solution:
Just replace picker tpl dynamicly, but not combo tpl.

picker.tpl = new Ext.XTemplate(
'<ul><tpl for=".">',
'<li role="option" class="x-boundlist-item">',
'{[this.formatName(values.country, "'+newValue+'")]}',
'</tpl></ul>', {
formatName: function (value, matchValue) {
return value.replace(RegExp("("+matchValue+")", "gi"), "<span style='color: red'>$1</span>");