extjs - 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

发生这种情况的原因是因为它实际上是在您每次按下键时都会更改值。您要使用的是select侦听器。使用它，您可以从所选记录中获取值。

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

Answer 2

尝试删除“范围：this”。删除它后，当您在事件中调用它时，您将能够看到触发事件的组合框。否则它将是窗口的值。