javascript - ExtJS:同步 ComboBox 和 TagField

Question

客户要求申请人能够从选项列表中进行初步选择，然后也可以从相同的选项中进行多项选择。 Primary 和 secondary 中的值不能重叠。

例如两个颜色选择问题:

Favorite Color: SELECT  Other Colors: SELECT

用户选择最喜欢的颜色红色:

Favorite Color: RED     Other Colors: SELECT
                ORANGE
                YELLOW
                GREEN
                BLUE
                PURPLE

红色现已从其他颜色中消失:

Favorite Color: RED     Other Colors: ORANGE
                                      YELLOW
                                      GREEN
                                      BLUE
                                      PURPLE

用户选择其他颜色绿色和蓝色:

Favorite Color: RED     Other Colors: GREEN BLUE

绿色和蓝色已从最喜欢的颜色中消失:

Favorite Color: RED     Other Colors: GREEN BLUE
                ORANGE
                YELLOW
                PURPLE

用户选择不同的最喜欢的颜色紫色:

Favorite Color: PURPLE  Other Colors: GREEN BLUE

其他颜色现在有红色，但没有紫色:

Favorite Color: PURPLE  Other Colors: GREEN BLUE
                                      RED
                                      ORANGE
                                      YELLOW

我正在考虑将组合框与标签字段配对，但正如您所看到的，试图保持两侧的商店对齐很麻烦。我尝试使用过滤器，但它们似乎不能动态工作。

在 ExtJS 中是否有一些更简单的方法可以做到这一点？就像一个标签字段有一个商店但有两个输入框，一个限制一个选择，另一个允许多个？

Answer 1

您可以使用过滤器动态过滤商店。

对于第一个组合框，您需要创建一个过滤器，仅过滤掉单个选择。

select: function(comb, record) {
    const value = record.get('abbr');
    const otherColors = Ext.getCmp('OtherColors');
    const otherColorsStore = otherColors.getStore();
    otherColorsStore.setFilters([{
        property: 'abbr',
        operator: '!=',
        value   : value
    }]);
},

对于配置了多项选择的第二个组合框，您需要创建一个值数组，这些值应该为第一个组合框过滤掉，然后使用 notin operator .

select: function(me,records) {
    const favouriteColor = Ext.getCmp('FavouriteColor');
    const favouriteColorStore = favouriteColor.getStore();
    const values = records.map(r => r.get('abbr'));  // creates an array of all colors to filter out
    favouriteColorStore.setFilters([{
        property: 'abbr',
        operator: 'notin',
        value   : values
    }]);
 }

See the working fiddle.