CODEWITHSUNDEEP
extjscombobox
Nick Wellinghoff
Nick Wellinghoff

Reputation: 49

Ext.js Combox keydown triggers select event with no selection

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?

Upvotes: 2

Views: 4622

Answers (2)

jptknta
jptknta

Reputation: 817

I added the following listConfig to a combobox to accomplish something similar:

listConfig: {
    listeners: {                    
         highlightitem: function(view, node, eOpts) {
             combo.setValue(node.innerText);
          }
     }
 }

It updates the combo box text field value on mouse over and key up/down.

Upvotes: 0

Nick Wellinghoff
Nick Wellinghoff

Reputation: 49

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();
        }
    }
});

Upvotes: 0

Related Questions