PDA

View Full Version : Local combobox with any match filter.



Rudiney
21 Nov 2011, 12:03 PM
Hello guys,

Im using ExtJs 4.0.7 and i want to know if there is a way to filter a combobox with local data, with not only the beginnig string, but filtering any match values???

In a example:


// local store
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.ComboBox', {
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});



So when user type 'ask', to find 'Alaska' as an option...

Can you help me???

I have search forum for existing post, but got nothing for 4.x version. I found this post (http://www.sencha.com/forum/showthread.php?31701-combobox-typeahead-search-not-only-the-beginning-of-string) but doesnt help me....

Thanks all.

mitchellsimoens
21 Nov 2011, 12:09 PM
doQuery within combobox doesn't really do smart filtering but you can do it yourself.

I would setup a keydown listener on the combobox and then do your filter there.

Rudiney
21 Nov 2011, 12:18 PM
Wow thanks for the quick answer!

hmm, i have done some try with keydown listeners, but i think ive done something wrong....

my try....


//using the same local store.....
Ext.create('Ext.form.ComboBox', {
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
enableKeyEvents:true, listeners: {
keydown: function(){
this.store.filter('name',/this.getRawValue()/);
}
}
});


Is this correct???

mitchellsimoens
21 Nov 2011, 12:29 PM
You will need to use RegEx as the value.

Rudiney
21 Nov 2011, 12:37 PM
i have tested in javascript console using just .filter('name',/ask/) and got 'Alask' just how i need...



states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

//filtering with /rawValue/
states.filter('name',/ask/);

// alaska found!
console.dir(states.data.items)




Now i just need to show this filter result as combobox's options.....

:)

Thanks....

Rudiney
21 Nov 2011, 3:03 PM
So... i know how to do a custom filter in combobox's store,

how can i put these results as combobox's options????

skirtle
21 Nov 2011, 7:43 PM
The easiest way it probably to hack it into the store instead:


var store = Ext.create('Ext.data.Store', {
...
filter: function(filters, value) {
Ext.data.Store.prototype.filter.apply(this, [
filters,
value ? new RegExp(Ext.String.escapeRegex(value), 'i') : value
]);
}
});

Alternatively, you could override doQuery:


Ext.create('Ext.form.field.ComboBox', {
...
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);

if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
});

Both work but both are pretty hacky.

Rudiney
22 Nov 2011, 2:24 AM
Thanks you! it works just fine!
Thanks so much.

Romick
22 Nov 2011, 8:13 AM
filter: function(field, newValue) {
store.filter({
property: 'name',
anyMatch: true,
value : newValue
});
},