PDA

View Full Version : Combo Box filtering by any match



junky8687
3 Feb 2012, 1:06 PM
In the below example, I'm trying to match any part of the string with the input value. For instance, if the user types in "vi" then both Virginia and West Virginia should be displayed in the dropdown list. Currently, the store for the combo box is not being loaded when I try to apply my custom filter. Code is below.


Ext.define('State', { extend : 'Ext.data.Model',
fields : [ {
type : 'string',
name : 'abbr'
}, {
type : 'string',
name : 'name'
}, {
type : 'string',
name : 'slogan'
} ]
});


var states = [
{
"abbr" : "VA",
"name" : "Virginia",
"slogan" : "Mother of States"
}, {
"abbr" : "WA",
"name" : "Washington",
"slogan" : "Green Tree State"
}, {
"abbr" : "WV",
"name" : "West Virginia",
"slogan" : "Mountain State"
}, {
"abbr" : "WI",
"name" : "Wisconsin",
"slogan" : "America's Dairyland"
}, {
"abbr" : "WY",
"name" : "Wyoming",
"slogan" : "Like No Place on Earth"
}];


var store = Ext.create('Ext.data.Store', {
autoLoad : false,
model : 'State',
data : states
});

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel : 'Select a single state',
renderTo : 'simpleCombo',
displayField : 'name',
valueField : 'abbr',
width : 320,
labelWidth : 130,
store : store,
queryMode : 'local',
lastQuery : '',
typeAhead : true,
minChars : 2,
name : 'agentDownline',
enableKeyEvents : true,
listeners: {
'keyup': function() {
this.store.filter(this.displayField, this.getRawValue(), true, false);
},
'beforequery': function(queryEvent) {
delete queryEvent.combo.lastQuery;
queryEvent.combo.onLoad();
return false;
}
}
});

Any help is appreciated.

Thanks

Romick
3 Feb 2012, 3:55 PM
Hi, junky8687

I would recomend do filter like this:
It's do not filter because combobox has it's own filter by default. Than you should overide it ot simply call store.clearFilter() and then make your own filtering. store.suspendEvents(); and store.resumeEvents(); if your store is large.



Ext.onReady(function() {

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select a single state',
displayField: 'name',
valueField: 'abbr',
width: 320,
labelWidth: 130,
queryMode: 'local',
typeAhead: true,
minChars: 2,
name: 'agentDownline',
store: new Ext.data.SimpleStore({
fields: ['abbr', 'name', 'slogan'],
data: [
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', 'America\'s Dairyland'],
['WY', 'Wyoming', 'Like No Place on Earth']
]
}),
listeners: {
buffer: 50,
change: function() {
var store = this.store;
//store.suspendEvents();
store.clearFilter();
//store.resumeEvents();
store.filter({
property: 'name',
anyMatch: true,
value : this.getValue()
});
}
}
});

Ext.create("Ext.Window", {
items: simpleCombo
}).show();


Hope it help ;)

junky8687
5 Feb 2012, 11:07 PM
That did the trick.

Thanks Romick!