Question

我正在尝试制作一个实时搜索组合框，除了一个小细节外，一切都很好。当用户通过组合框按下向下和向上键时，我想调用搜索方法。这确实会触发一个select事件但是piker没有选择。当我用鼠标选择组合框项目或按Enter键时，选择事件会得到一个选择。我想在导航框时使用向下和向上键选择的值启动查询。

组合代码

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
            }
        }
    }

});

所以当

select:function (combo, selection) {

使用向下箭头键或向上箭头键调用

，然后选择为空。当使用回车键或鼠标单击调用它时，它具有突出显示的组合框选择。所以问题是如何从箭头键事件中获取组合框的值？

Answer 1

好的，我自己想出来了。您必须覆盖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();
        }
    }
});

Answer 2

我将以下listConfig添加到组合框中以实现类似的功能：

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

它会在鼠标悬停时更新组合框文本字段值并按键向上/向下键。

Ext.js Combox keydown触发select事件而没有选择

2 个答案: