ExtJS实现ComboBox与TagField联动：选项互斥同步方案咨询

Hey there! This is a really common UI scenario, and you’re spot-on to want a single store solution—managing two separate stores with syncing filters can get messy fast. Let’s break down a clean, maintainable way to implement this using a shared store for both your ComboBox (main selection) and TagField (secondary multi-selection), with dynamic filters that update automatically when selections change.

Core Approach #

The key idea is to use one shared data store for both components, then apply dynamic filters to each component’s view of the store. The filters will exclude any values already selected in the other component, ensuring no overlap. We’ll listen to selection events on each component to refresh the filters in real time.

Step-by-Step Implementation #

1. Define the Shared Store #

First, create a single store with all your available options (colors in this example):

Ext.define('MyApp.store.ColorOptions', {
    extend: 'Ext.data.Store',
    alias: 'store.coloroptions',
    fields: ['id', 'name'],
    data: [
        { id: 1, name: 'RED' },
        { id: 2, name: 'GREEN' },
        { id: 3, name: 'BLUE' },
        { id: 4, name: 'PURPLE' },
        { id: 5, name: 'YELLOW' }
    ]
});

2. Configure the Main Selection ComboBox #

This will be your single-select main option. We’ll add listeners to update the TagField’s filter whenever the main selection changes:

Ext.create('Ext.form.field.ComboBox', {
    renderTo: Ext.getBody(),
    fieldLabel: '主选颜色',
    store: Ext.create('MyApp.store.ColorOptions'),
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
    editable: false,
    listeners: {
        // When a main selection is made, exclude it from the TagField
        select: function(combo) {
            const tagField = this.up('container')?.down('tagfield') || Ext.ComponentQuery.query('tagfield')[0];
            tagField.getStore().filterBy(record => record.get('id') !== combo.getValue());
        },
        // When main selection is cleared, restore options to TagField (minus its own selections)
        deselect: function(combo) {
            const tagField = this.up('container')?.down('tagfield') || Ext.ComponentQuery.query('tagfield')[0];
            const selectedTagIds = tagField.getValue() || [];
            tagField.getStore().filterBy(record => !selectedTagIds.includes(record.get('id')));
        }
    }
});

3. Configure the Secondary Selection TagField #

This multi-select field will filter out the main selection and any values already chosen here. We’ll add listeners to update the ComboBox’s filter when selections change:

Ext.create('Ext.form.field.Tag', {
    renderTo: Ext.getBody(),
    fieldLabel: '次选颜色',
    store: Ext.data.StoreManager.lookup('coloroptions'), // Reuse the shared store
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
    editable: false,
    listeners: {
        // When tags are added/removed, update ComboBox to exclude all selected tags
        select: function(tagField) {
            const combo = this.up('container')?.down('combo') || Ext.ComponentQuery.query('combo')[0];
            const selectedTagIds = tagField.getValue() || [];
            combo.getStore().filterBy(record => {
                return !selectedTagIds.includes(record.get('id')) && record.get('id') !== combo.getValue();
            });
        },
        deselect: function(tagField) {
            // Same logic as select event—refresh filter when tags are removed
            const combo = this.up('container')?.down('combo') || Ext.ComponentQuery.query('combo')[0];
            const selectedTagIds = tagField.getValue() || [];
            combo.getStore().filterBy(record => {
                return !selectedTagIds.includes(record.get('id')) && record.get('id') !== combo.getValue();
            });
        }
    },
    // Initialize filter to exclude the default main selection (if any)
    afterRender: function() {
        this.callParent(arguments);
        const combo = this.up('container')?.down('combo') || Ext.ComponentQuery.query('combo')[0];
        this.getStore().filterBy(record => record.get('id') !== combo.getValue());
    }
});

Key Notes for Success #

• Component Lookup: Instead of using Ext.ComponentQuery (which can be fragile if multiple components exist), if your ComboBox and TagField are in a parent container (like a FormPanel), use this.up('form').down('tagfield') for more reliable component targeting.
• Local Query Mode: Ensure both components use queryMode: 'local' since we’re filtering client-side from the shared store.
• Filter Refresh: Using filterBy() instead of static filters lets us dynamically adjust the exclusion logic based on real-time selections.

This setup will handle all the edge cases you mentioned:

• When you select "RED" as main, it disappears from the TagField options
• When you select "GREEN" and "BLUE" in the TagField, they’re removed from the ComboBox
• When you switch main selection to "PURPLE", "RED" returns to the TagField and "PURPLE" is hidden

内容的提问来源于stack exchange，提问作者Yimin Rong