Question

I am trying to make a live search combo box and everything is working great except for one small detail. I want to call a search method as the user presses the down and up keys through the combo box. This does trigger a select event but the piker has no selection. When I select a combobox item with my mouse or by pressing enter the select event does get a selection. I want to launch queries using the value selected with the down and up keys while navigating the box.

Combo code

searchField = new Ext.form.ComboBox({
    id:'searchField',
    store: queryCacheStore,
    pageSize:0,
    width: 780,
    triggerAction:'all',
    typeAhead:false,
    mode:'remote',
    minChars:2,
    forceSelection:false,
    hideTrigger:true,
    enableKeyEvents:true,
    queryDelay:200,
    queryMode:'remote',
    queryParam:'query',
    queryCaching:false,
    displayField:'query',
    autoSelect:false,
    listConfig:{
        loadingText: 'Searching...',

          // Custom rendering template for each item
          getInnerTpl: function() {
              return '<div class="search-item">' +
                  '{query}' +
                  '</div>';
          }
      },
    listeners: {
        specialkey:function (field, e) {
            if (e.getKey() == e.UP || e.getKey() == e.DOWN) {

            }
        },
        select:function (combo, selection) {
            var post = selection[0];
            searchField.setValue(post.get('query'));
            requestAccessList.runSearch();
        },
        focus:function (combo, event, opts) {
            combo.store.proxy.extraParams = {
                'lcm':true,
                'type':RequestAccess.OBJECT_TYPE
            }
        }
    }

});

So when

select:function (combo, selection) {

gets called with down arrow key or up arrow key then selection is null. When it gets called with enter key or mouse click it has the highlighted combobox selection. So the question is how can I get the value of the combo box from arrow key events?

Answer 1

OK I figured this out myself. You have to override the highlight event of the BoundListKeyNav

Ext.view.BoundListKeyNav.override({
      highlightAt:function (index) {
//            this.callOverridden(index);      For some reason this does not work
        var boundList = this.boundList,
        item = boundList.all.item(index);
        if (item) {
            item = item.dom;
            boundList.highlightItem(item);
            boundList.getTargetEl().scrollChildIntoView(item, true);
            searchField.setValue(boundList.getNode(index).textContent);
            searchService.runSearch();
        }
    }
});