Showing highlighted value in combobox textfield on pressing up/down arrow keys - extjs

Question

In extjs combobox (I'm using it as autocomplete), as you type, it shows the matching results.
Now if I press the down arrow key or the up arrow key, I want to see that highlighted value in the combobox textfield, similar to a google search.
How can this be done?
Any help is highly appreciated… Thanks

Answer 1

You should override the hightlight event of the boundlist.
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);
}
}
});