在ExtJS标记字段中选择值后,输入字段未被清除

fnvucqvd  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(205)

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

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()
});
fivyi3re

fivyi3re1#

这似乎是一个bug。如果你看一下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

qnzebej0

qnzebej02#

我对多字符串值使用了数组(列表项:林肯·亚伯拉罕,输入值:亚伯拉罕·林)。
方法检查它是否正确匹配。
在我的实现中,输入字符串的最后一部分被用作通配符字符串。它还解决了列表项与输入字符串相反的问题,这是我的例子。

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();
      }
    }
  }

相关问题