2012-11-21 141 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); 
      } 
    } 
} 

它在鼠標和關鍵更新組合框的文本字段值向上/向下。