Note that there are some explanatory texts on larger screens.

plurals
  1. POExt.js Combox keydown triggers select event with no selection
    text
    copied!<p>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. </p> <p>Combo code</p> <pre><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 '&lt;div class="search-item"&gt;' + '{query}' + '&lt;/div&gt;'; } }, 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 } } } }); </code></pre> <p>So when </p> <pre><code>select:function (combo, selection) { </code></pre> <p>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?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload