2012-11-21 90 views
2

我试图做一个实时搜索组合框,除了一个小细节外,一切工作都很好。我想在用户通过组合框按下向上和向上键时调用搜索方法。这确实会触发选择事件,但是骑手没有选择。当我用鼠标选择一个组合框项目或按下Enter键时,选择事件就会得到一个选择。我想在导航框时使用用向下和向上键选择的值启动查询。Ext.js Combox keydown触发器选择没有选择的事件

组合代码

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) { 

被称为与向下箭头键或向上箭头键,然后选择为空。当使用回车键或鼠标点击时,它会突出显示组合框选择。所以问题是如何从箭头键事件中获取组合框的值?

回答

0

好的我自己想通了。你必须重写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(); 
     } 
    } 
}); 
0

的亮点事件中,我添加了以下listConfig的组合框来实现类似的东西:

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

它在鼠标和关键更新组合框的文本字段值向上/向下。