ExtJS: Синхронизация ComboBox и TagField

Question

У клиента есть запрос на то, чтобы заявитель мог сделать первичный выбор из списка опций, а затем также несколько вариантов из одних и тех же опций.Значения основного и дополнительного не могут перекрываться.

Например, два вопроса выбора цвета:

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 .

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

См.рабочая скрипка.