View Full Version : ComboBox filter on mutiple columns

2 Dec 2010, 3:13 PM
I'm creating a ComboBox with Groupings (ie Country/City) values. I was able to create the grouping by defining a template that works well. The filtering works well of the City values, but I want to filter on Country OR City. (Country is the grouping). Now, I'm trying to customize the filtering of the store on records where query value matches the City OR the Country.

My first attempt was to add a handler for the beforeQuery event on the ComboBox, but I had to copy some of the logic from the doQuery function into my handler.

My current solution is to wrap the filter function from my store in a function that alters the parameters passed in from my ComboBox.

I'm just curious is there is a better solution?

var ds = new Ext.data.Store({
reader: createReader()

// define a startWith method for strings
String.prototype.startsWith = function (str) { return (this.match("^" str) == str) }

// wrap the original filter function around a function which catches the query
// and alters it to look in country or city columns
ds.baseFilter = ds.filter;
ds.filter = function (property, value, anyMatch, caseSensitive, exactMatch) {

if (typeof property == 'string') { // check if the property is a string
// assume that this is combo box and search on City OR Country

// lower case the search value
var queryString = value.toLowerCase();

// define function to match the query string against City OR Country
function fn(record) {
var city = record.get('City').toLowerCase();
var country = record.get('Country').toLowerCase();
return city.startsWith(queryString) || country.startsWith(queryString);

// redefine the property to instead use the function to filter the record set
property = [{ fn: fn}];


// call the original function
this.baseFilter(property, value, anyMatch, caseSensitive, exactMatch);

// load the data set

var combo = new Ext.form.ComboBox({
store: ds,
displayField: 'City',
valueField: 'CityID',
typeAhead: false,
triggerAction: 'all',
lazyInit: true,
mode: 'local',
applyTo: input,
anyMatch: true,

I'm new to Ext JS (1.7 days) and excited about learning the framework

3 Dec 2010, 5:08 AM
There is an open feature request to move the filtering logic from ComboBox.doQuery into a separate method, so you can simply override it and perform a filterBy yourself.