Extjs TagField 下拉项目在选择后保持不变

Question

我当前正在尝试编辑 TagField 行为，以便即使您选择一个或多个，下拉项仍保留在下拉列表中。用例类似于收入计算器（每个用户都可以根据一些常量和数学运算符确定自己的数学公式），因此用户可以选择 f.e.多次符号“+”即可得到他们想要的公式。有没有比 f.e. 更简单的方法？选择后将记录添加回存储吗？有没有更好的组件来完成这样的事情？

正如我之前所描述的，我只尝试了 TagField，而不是每次选择后的漂亮代码。我敢打赌有更好的方法可以做到这一点，我对 Extjs 有点陌生。感谢您的每一个建议:)

Answer 1

以下是您如何自己执行此操作的一些提示：

1. 覆盖

告诉组件不要过滤选择器存储。 为此，我添加了一个标志

reselectable

，以便您可以以标准方式重用标记字段。

Ext.define('MyApp.overrides.form.field.Tag', {
    override: 'Ext.form.field.Tag',
    
    config: {
        reselectable: false
    },

    updateReselectable: function(value) {
        if (value) this.defaultListConfig.cls = ('x-reselectable');
    },

    filterPicked: function(rec) {
        if (this.getReselectable()){
            return true;
        } else {
            return !this.valueCollection.contains(rec);
        }
    }
})

不显示所选的cls

    .x-reselectable .x-boundlist-selected {
        color: inherit;
        background: inherit;
        border-color: inherit;
    }

2. 重复使用条目

尝试找出如何重用条目，就像我创建覆盖一样。

为此，您可能需要阅读源文件：

https://docs.sencha.com/extjs/7.7.0/classic/src/Tag.js.html