按向上/向下箭头键在组合框文本字段中显示突出显示的值

Question

在extjs组合框中（我将其用作自动完成），在您键入时，它会显示匹配的结果。

现在，如果我按向下箭头键或向上箭头键，我想在组合框文本字段中看到突出显示的值，类似于谷歌搜索。

如何做到这一点？
任何帮助都非常感谢...谢谢

Answer 1

您应该覆盖boundlist的hightlight事件。

ExtJS - Update combobox text field value from highlighted row

var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"},
        {"abbr":"NY", "name": "New York"}
    ]
});

var combo = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    typeAhead: true,
    enableKeyEvents: true,
    renderTo: Ext.getBody(),
    // show mouseover item value in the combobox textfield
    listConfig: {
        listeners: {
            itemmouseenter: function(cmb, record, item, index, e, eOpts ) {
                // of course you should set unique value here, in this case 'abbr'
                combo.setValue(record.get('abbr'));
            }
        }
    }
});

Ext.view.BoundListKeyNav.override({
      highlightAt:function (index) {
        var boundList = this.boundList;
        var litem = boundList.all.item(index);
        if (litem) {
            litem = litem.dom;
            boundList.highlightItem(litem);
            boundList.getTargetEl().scrollChildIntoView(litem, true);
            combo.setValue(boundList.getNode(index).textContent);
        }
    }
});