Extjs: Remove child tags from tagfield when parent tag is removed

Question

I have two tag fields. 1-Parent tag 2-Child tag

Parent tag includes 5 categories i.e a,b,c,d,e Child tag includes the corresponding tags from parent Ex- If a user selects parent tag 'a'(or a,b,c) or selects any tag then everytime a function is called then a store service is called which loads all the corresponding child tags by passing extraparam(a in case one single tag selection and comma seperated parameters in case of multi-select) to the in child tagfield. So child tagfield is then loaded with the corresponding dropdown according to the selections made in parent tag and user can add the corresponding tags to the child tagfield. Now, I want to remove the corresponding child tags if a parent tag is removed. Ex- If user selects a and its corresponding entries are x,y,z. So if a user adds x and z in the child tagfield.then if he removes parent tag i.e 'a' then x,y should also get removed from the child tagfield which were added.

Tagfield code:

{
                fieldLabel: 'FieldA',
                displayField: 'Label',
                itemId:'FieldA',
                valueField: 'Type',
                listeners:{
                    change: 'selectedFieldATypes'
                },
                bind: {
                    store: '{FieldATypes}',
                    hidden: '{status === "NULL"}'
                },
            },{
                fieldLabel: 'FieldB',
                itemId:'FieldB',
                displayField: 'label',
                valueField: 'name',
                editable: true,
                selectOnFocus: false, 
                listeners:{
                    render: 'FieldATypes'
                },
                bind: {
                    store: '{FieldBStore}',
                    hidden: '{status === "NULL"}'
                },
                
            } 

Function code:

selectedFieldATypes: function(){
         const viewModel = this.getViewModel();
                  viewModel.set('selectedtypesarray',selectedTypes);
         selectedTypes=Ext.ComponentQuery.query('#FieldB').getValue();
        if(selectedTypes.length==0){
            this.getStore('FieldBStore').load({params: {Ids:[Comma seperated ID's of selected Parent tag]}});   
        }
        else{
        this.getStore('FieldBStore').load({params: {groupIds:All id's if not parent tag is selected}})
        }
    },

Answer 1

Set field Value to null

selectedFieldATypes: function(fldA, newValue, oldValue){
    if(Ext.isEmpty(newValue)) {
        // get reference of field B and set the Value to null
        fldA.next().setValue(null);

        // clear fieldB store 
        // fieldBReference.getStore().removeAll();
        return;
    }

    // your Code
}