JavaScript ExtJS - Unable to reload combo after AJAX call

Background
I have ExtJS grid and option to add new row/data into the grid and into the database with the help of AJAX

Requirement
When adding new data I have two combo boxes A & B, whereas B is dependent on A, I want to filter the list of values in B whenever the value for A changes,

Code

Ext.define('Model.A', {
    extend: 'Ext.data.Model',
    fields: ['name', 'id', 'number']
});

Ext.define('Model.B', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'code']
});

The Store

var store = {
    A: new Ext.data.Store({
        autoDestroy: true,
        model: 'Model.A',
        data: data.A,
        proxy: {
            type: 'memory'
        }
    }),
    B: new Ext.data.Store({
        autoDestroy: true,
        model: 'Model.B',
        data: data.B,
        proxy: {
            type: 'memory'
        }
    }),
};

The Grid

var grid = Ext.create('Ext.grid.Panel', {
    store: store.data,
    title: "###########",
    renderTo: "grid",
    loadMask: true,
    features: [filters],                
    columns: [{
        // The ComboB
        text: "B",
        dataIndex: "comboB",
        width: 250,
        editor: {
            xtype: "combo",
            store: store.b,

            displayField: "###",
            valueField: "###",
            forceSelection: true,
            typeAhead: false,

            allowBlank: false,
            blankText: "required.",

            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">{###} - {###}</tpl>'),

            listConfig: {
                getInnerTpl: function() {
                    return "{###} - {###}";
                }
            }
        },
        renderer: function(value) {
            return data.B.code[value] + " - " + data.B.name[value];
        }
    }
    .
    . // other grid fields
    .
    ,{
        // The ComboA
        text: "A",
        dataIndex: "comboA",
        width: 250,
        editor: {
            xtype: "combo",
            store: store.insurances,

            displayField: "###",
            valueField: "###",
            forceSelection: true,
            typeAhead: false,

            allowBlank: false,
            blankText: "required.",

            displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">{###} - {###}</tpl>'),

            listConfig: {
                getInnerTpl: function() {
                    return "{###} - {###}";
                }
            },

            listeners: {
                change: function (e) {
                    A_ID = {"id":e.value};
                    grid.receiveAjaxRequest("URL",A_ID);
                }
            }
        },
        renderer: function(value) {
            return data.A.number[value] + " - " + data.A.name[value];
        },
        filter: {
            type: 'list',
            options: data.insurancesFilter,
            phpMode: true
        }
    }],
    tbar: [{
        // iconCls: 'icon-add',
        text: 'Add',
        scope: this,
        handler: function () {
            .
            .
            .
        }
    }],
    plugins: [rowEditing],
    newRecord: false,
    listeners: {
        beforerender: function() {
            document.getElementById("grid").innerHTML = "";
        }
    },

    /*
     *The Ajax Request Where I have successfully 
     *Received the filtered data and now want to 
     *incorporate the data into the comboB
     */

    receiveAjaxRequest: function (url, ajaxData) {

        gridView = grid.getView();

        gridView.setDisabled(true);

        Ext.Ajax.request({
            url: url,
            params: ajaxData,
            success: function(response) {

                gridView.setDisabled(false);

                //console.log(store.vaccines.data);
                responseJSON = Ext.JSON.decode(response.responseText);

                            // This is how I tried to reload the combox box
                data.B = responseJSON;
                store.B.load();

                //store.B.data = response;
                console.log(store.B);

            }
        });
    } //receiveAjaxRequest
});

I have already brought the data in receiveAjaxRequest function on the change of comboA and this is how I tried to reload the combox box

data.B = responseJSON;
store.B.load();

PS: I'm not very familiar with ExtJS and the code was written by some other developer in past. And I'm assigned with the above Requirement Block

Answer:1

I have a web form with a bazillion check boxes. If the form is filled out incorrectly, none of the check boxes are reset (as an anti-frustration feature). Problem is, the reset button doesn't work to ...

I have a web form with a bazillion check boxes. If the form is filled out incorrectly, none of the check boxes are reset (as an anti-frustration feature). Problem is, the reset button doesn't work to ...

highcharts gets my hour time wrong I'm from venezuela just in case. I doing a real time system where I get in my db the time,seconds and miliseconds like 10:39:09:2 I apply the strtotime($time) then ...

highcharts gets my hour time wrong I'm from venezuela just in case. I doing a real time system where I get in my db the time,seconds and miliseconds like 10:39:09:2 I apply the strtotime($time) then ...

encodeURIComponent escapes all characters except the following: - _ . ! ~ * ' ( ) But is it possible to extend the functionality encode the above special characters as well. I know i can do ...

encodeURIComponent escapes all characters except the following: - _ . ! ~ * ' ( ) But is it possible to extend the functionality encode the above special characters as well. I know i can do ...

I ve drawn a pie chart graph using pie chart flot library.. I ve my own custom legend box. So I was trying to know if it is possible to hide the a particular slice based on user input. Like here Ive ...

I ve drawn a pie chart graph using pie chart flot library.. I ve my own custom legend box. So I was trying to know if it is possible to hide the a particular slice based on user input. Like here Ive ...