Question

组合框有一个选择器（一个绑定列表实例），它本身有一个keynav (BoundListKeyNav)。

如何修改/自定义此keynav实例？

基本上，默认情况下它包含home / end的绑定。虽然这在正常情况下很有用，但在使用定制的组合框时却不是这样。我希望我的home / end键能够正常工作，就像在ext决定劫持它们之前一样（转到输入内容的开始/结束）。

理想情况下，我想在combobx的配置对象中执行此操作，如下所示：

{
    xtype: 'combobox',
    itemId: 'search',
    emptyText: 'Search',
    editable: true,
    typeAhead: false,
    hideTrigger: true,
    queryMode: 'local',
    minChars: 3,
    displayField: 'name',
    valueField: 'search'
}

它的行为方式使您可以在（搜索）中键入任何内容，但也可以选择自动完成的搜索。

keynav生活在combo.listKeyNav，但是在ext中设置它的代码块没有任何事件让我们跳进去改变它。似乎组合没有配置这样的东西（因为函数设置listKeyNav没有从我们的组合对象中获取任何配置）。

FYI

BoundListKeyNav这些绑定是硬编码的。组合框的onExpand创建实例（在任何地方都不进行配置，不允许自定义）。

Answer 1

唯一的方法是覆盖组合的onExpand方法。

Answer 2

只有Saki wrote自定义键导航才能覆盖组合框的onExpand方法 - 基本上复制原始实现（如果是ExtJS4）。

例如：

＆＃13;

onExpand: function() {
  var me = this,
    keyNav = me.listKeyNav,
    selectOnTab = me.selectOnTab,
    picker = me.getPicker();

  // Handle BoundList navigation from the input field. Insert a tab listener specially to enable selectOnTab.
  if (keyNav) {
    keyNav.enable();
  } else {
    keyNav = me.listKeyNav = new Ext.view.BoundListKeyNav(me.inputEl, {
      boundList: picker,
      forceKeyDown: true,
      tab: function(e) {
        if (selectOnTab) {
          this.selectHighlighted(e);
          me.triggerBlur();
        }
        // Tab key event is allowed to propagate to field
        return true;
      },
      enter: function(e) {
        var selModel = picker.getSelectionModel(),
          count = selModel.getCount();

        this.selectHighlighted(e);

        // Handle the case where the highlighted item is already selected
        // In this case, the change event won't fire, so just collapse
        if (!me.multiSelect && count === selModel.getCount()) {
          me.collapse();
        }
      },
      home: {
        fn: Ext.emptyFn,
        defaultEventAction: false
      },
      end: {
        fn: Ext.emptyFn,
        defaultEventAction: false
      }
    });
  }

  // While list is expanded, stop tab monitoring from Ext.form.field.Trigger so it doesn't short-circuit selectOnTab
  if (selectOnTab) {
    me.ignoreMonitorTab = true;
  }

  Ext.defer(keyNav.enable, 1, keyNav); //wait a bit so it doesn't react to the down arrow opening the picker
  me.inputEl.focus();
}

＆＃13;

ExtJS：如何自定义组合框选择器的keynav？

2 个答案: