View Full Version : Ext.ux.ComboItemsHighlight

15 Oct 2010, 7:05 AM
I've written a simple Combobox plugin to highlight drop down list text that matches the user's entered text. In my use, I have a "remote" store that searches for any items containing the user's text, in a case-insensitive manner. This plugin is also case insensitive.

I've done limited testing on a "local" store also, and it seemed to work as well.

* A plugin that highlights text in combobox drop down items. Any text that matches (case insensitive)
* the user's typed data is highlighted.
* This plugin assumes that the "displayField" property has been set on the Combobox.
Ext.ux.ComboItemsHighlight = Ext.extend(Object, {

replacementText: '<span class="combo-match-text">$1</span>',

init: function(combo) {
this.combo = combo;

// Tie into the ComboBox's "bindStore" method to apply a custom collectData and prepareData to the DataView.
this.combo.bindStore = this.combo.bindStore.createInterceptor(this.comboBindStore, this);

* Apply a custom prepareData to the DataView.
comboBindStore : function(store, initial){
if (initial) {
this.combo.view.collectData = this.combo.view.collectData.createInterceptor(this.dataViewCollectData, this);
this.combo.view.prepareData = this.dataViewPrepareData.createDelegate(this);

* Apply a custom collectData to the DataView.
dataViewCollectData : function(records, startIndex){
this.regex = new RegExp("("+this.combo.getRawValue()+")", "gi"); // g=global, i=case insensitive

* Apply case-insensitive highlighting to the text that matches what the user has typed.
* Assumes that the user has set the "displayField" property.
dataViewPrepareData : function(data, recordIndex, record) {
if (!this.combo.displayField)
return data;

// Make a copy of the data, otherwise we are modifying the data in the store
data = Ext.apply({},data);
data[this.combo.displayField] = data[this.combo.displayField].replace(this.regex, this.replacementText);
return data;

The style:

.combo-match-text {