2

私はライブ検索コンボボックスを作成しようとしていますが、1つの小さな詳細を除いてすべてがうまく機能しています。ユーザーがコンボボックスを介して下キーと上キーを押したときに、検索メソッドを呼び出したいと思います。これは選択イベントをトリガーしますが、パイカーには選択がありません。マウスでコンボボックスアイテムを選択するか、Enterキーを押すと、selectイベントが選択されます。ボックスをナビゲートしながら、下キーと上キーで選択した値を使用してクエリを起動したいと思います。

コンボコード

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

下矢印キーまたは上矢印キーで呼び出された場合、選択はnullになります。Enterキーまたはマウスクリックで呼び出されると、コンボボックスの選択肢が強調表示されます。だから問題は、矢印キーイベントからコンボボックスの値を取得するにはどうすればよいですか？

4

2 に答える 2

0

OK私はこれを自分で理解しました。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();
        }
    }
});
于 2012-12-02T07:30:49.390 に答える
0

次のlistConfigをコンボボックスに追加して、同様のことを実現しました。

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

マウスオーバーおよびキーアップ/ダウンでコンボボックスのテキストフィールド値を更新します。

于 2013-06-08T01:46:39.980 に答える