ComboBox fires a change event every time a key is pressed

Question

I am trying to create a grid using combobox in the toolbar, in Grid I will have information about the employees, and the combo will allow me to choose the employee who I would like to load this information.

I created the grid easily, but I have a problem with combobox in the toolbar: it fires a change event every time I print 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/

Place the cursor inside this combination and start typing. After each keystroke, this event is fired (see Console)

I would like this event (or another, it did not matter) to fire when the user selects a valid element from this checkbox (I use forceSelection).
I could add editable: false, but I would like to have local filtering after entering part of a valid value.

Answer 1

The reason this happens is because it actually changes the value every time you press a key. You want to use the select listener. Using this, you can extract the value from the selected record.

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

Answer 2

Try removing "scope: this". After removing it, when you call this in the case, you can see the drop-down field from which the event occurs. Otherwise, it will be the value of the window.