View Full Version : Ext Js 4.1 Combo Issue

12 Nov 2012, 7:08 AM
I am using Ext Js 4.1 . Suppose a combo contains a dropdown value XYZ . My requirement is even if the user types XYY instead of XYZ , the combo must select XYZ . I looked for some examples but none are specifically matching this requirement. Please guide me if such requirement can be implemented with Ext Js Combo.

12 Nov 2012, 7:26 AM
The combobox has a function doQuery, if your search is local you could override this function
and implement a different filter in this part of the function....

me.activeFilter = new Ext.util.Filter({
root: 'data',
property: me.displayField,
value: me.enableRegEx ? new RegExp(queryString) : queryString

12 Nov 2012, 7:54 AM
I think you have a few options here. I've never used the activeFilter function of the combo box, but that may be one approach. You could also catch the "beforequery" event of the combo box, return false, and then filter the store yourself. There are a couple of ways of doing this, but this is the most straight forward, you may have to approach it by just returning false for the beforequery event and then doing your work on the keypress events.

var test = Ext.create('combobox');

test.on('beforequery', function (queryEvent, eOpts) {
//Get reference to the store and filter it
var combo = queryEvent.combo;
combo.store.filterBy(function (record, id) {
//Logic to filter the store, return true for valid records or closest matching
}, this);

//Show the drop down for the combo

//Cancel the default query behavior
return false;

Another option is to do your searching server side depend how much data you are dealing with. I've found this to be a much easier approach in situations when dealing with thousands of records. Multi threaded database servers are a little better at search algorithms than I've been able to pull off in client side javascript. To do that, just set the queryMode to remote on the combo box configuration and be prepared to handle a request to the read url of your store with a query parameter named 'query' with the search term. Then return the records that should show.