选择 ExtJS 标记字段中的值后，输入字段不会被清除

Question

我有带有 anyMatch = true 的 ExtJS 标记字段。现在，如果您键入 AB，它将显示结果，一旦您选择选择，它将清除您输入的输入，即 AB 现在当您有 anyMatch=true 时，如果我输入 HI 它会显示结果，但是当您选择值时，输入字段不会被清除。我看到了在 clearInput 方法中显式处理的 ExtJS Tag 字段代码。我想知道为什么以这种方式实施？ 下面是示例代码

    Ext.create('Ext.form.Panel', {
    title: 'Tag Field Example',
    width: 1000,
    bodyPadding: 10,

    items: [{
        xtype: 'fieldcontainer',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'fieldcontainer',
            defaults: {
                flex: 1,
            },
            layout: 'hbox',
            items: [{

                xtype: 'tagfield',
                minChars: 1,
                anyMatch: true,
                allowBlank: true,
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 1',
                name: 'tagField1',
                store: ['ABC D', 'EFG HI', 'C'],
                queryMode: 'local',
                filterPickList: true,
                emptyText: 'Multi Select...'
            }]
        }]
    }],
    renderTo: Ext.getBody()
});

Answer 1

我将数组用于多字符串值（列表项：Lincoln Abraham，输入值：Abraham Lin）。
这种方法可以检查它是否正确匹配。
在我的实现中，输入字符串的最后一部分用作通配符字符串。它还解决了列表项与输入字符串相比反转的问题，在我的情况下。

   clearInput: function() {
    var me = this,
      valueRecords = me.getValueRecords(),
      inputValue = me.inputEl && me.inputEl.dom.value,
      lastDisplayValue;
    if (valueRecords.length && inputValue) {
      lastDisplayValue = valueRecords[valueRecords.length - 1].get(me.displayField);

      let inputValueArr = inputValue.split(' ');
      let lastDisplayValueArr = lastDisplayValue.split(' ');
      let matchCount = 0;
      Ext.each(inputValueArr, function(iv, idx1, arr1) {
        Ext.each(lastDisplayValueArr, function(ldv, idx1, arr2) {
          if (!me.anyMatch) {
            if (Ext.String.startsWith(ldv, iv, true)) {
              matchCount++;
            }
          } else {
            if (ldv.toLowerCase().indexOf(iv.toLowerCase()) !== -1) {
              matchCount++;
            }
          }
        });
      });
      if (matchCount < inputValueArr.length) {
        return;
      }
      me.inputEl.dom.value = '';
      if (me.queryMode === 'local') {
        me.clearLocalFilter();
        // we need to refresh the picker after removing
        // the local filter to display the updated data
        me.getPicker().refresh();
      }
    }
  }

Answer 2

这似乎是一个错误。如果您查看tagfield class definition 中的clearInput 方法，特别是在提前返回的部分：

if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
    return;
}

如果最后选择的标记字段值不以键入的输入值开头（'abc d' 以'ab' 开头，因此该字段被清除；'efg hi' 不以“hi”开头-因此清除被丢弃）。

当您启用 anyMatch 配置时，这显然不起作用。

上面的提早返回部分应该是这样的：

if (!me.anyMatch) {
    if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
        return;
    }
} else {
    if (lastDisplayValue.toLowerCase().indexOf(inputValue.toLowerCase()) === -1) {
        return;
    }
}

当anyMatch未启用时，我们保持初始检查，否则，我们检查键入的输入值是否包含在最后选择的标签字段值中。

这里是建议覆盖的小提琴：https://fiddle.sencha.com/#view/editor&fiddle/32q0