ComboBox fires change event on every keypress

Question

I'm trying to build grid with combobox in toolbar, in Grid I will have some informations about employees and combo will allow me to select employee I would like to load those info.

I've created grid easily, but I have problem with combobox in toolbar: it fires change event every time I type something.

Ext.define('My.Grid.Combo', {
    extend: 'Ext.form.ComboBox',
    fieldLabel: 'Choose State',
    store: states,
    alias: 'widget.combostates',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    forceSelection: true,
    listeners: {
        change: function (field, newValue, oldValue) {
            console.log(newValue);
        },
        scope: this
    }
});

Here is my demo: http://jsfiddle.net/Misiu/LTVXF/

Put cursor inside that combo and start typing. After every key press that event is fired (see console)

I would like to get that event (or other, doesn't matter) to fire after user selects valid element from that checkbox (I'm using forceSelection).
I could add editable: false, but I would like to have local filtering after I enter part of valid value.

Answer 1

The reason this is happening is because it actually is changing the value every time you hit a key. What you want to use is the select listener. Using this you can grab the value out of the record that was selected.

listeners: {
    select: function(combo, records, eOpts) {
        console.log(records[0].get('name'));
        console.log(records[0].get('abbr'));
    }
}