Sencha type: 'combobox' 값 변경시, 다른 combobox 변경하기

dependancy가 있는 combobox에 대해서 master 역할을 하는 combobox 변경시, slave combobox 내용 변경하기

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: 'vbox',
    items: [
        {
            xtype: 'combobox',
            id: 'comboBox1',
            fieldLabel: 'Master ComboBox',
            store: ['Category 1', 'Category 2', 'Category 3'],
            listeners: {
                select: function (combo, record, eOpts) {
                    console.log('Master ComboBox changed to:', combo.getValue());

                    // Fetch and update the data for the slave ComboBox
                    const comboBox2 = Ext.getCmp('comboBox2');
                    if (comboBox2) {
                        loadComboBox2Data(combo.getValue());
                    }
                }
            }
        },
        {
            xtype: 'combobox',
            id: 'comboBox2',
            fieldLabel: 'Slave ComboBox',
            store: {
                fields: ['id', 'name'],
                data: [] // Initially empty
            },
            queryMode: 'local',
            displayField: 'name',
            valueField: 'id',
            emptyText: 'Select a dependent option'
        }
    ]
});

// Function to load ComboBox2 data dynamically
function loadComboBox2Data(masterValue) {
    Ext.Ajax.request({
        url: '/get-dependent-data', // Your server endpoint
        method: 'GET',
        params: {
            masterValue: masterValue // Pass the selected value of ComboBox1
        },
        success: function (response) {
            const comboBox2 = Ext.getCmp('comboBox2');
            const responseData = Ext.decode(response.responseText).data;

            if (comboBox2) {
                // Update the store of ComboBox2 with new data
                comboBox2.getStore().loadData(responseData);

                // Optionally reset the value of ComboBox2
                comboBox2.reset();

                console.log('Slave ComboBox updated with new data:', responseData);
            }
        },
        failure: function () {
            Ext.Msg.alert('Error', 'Failed to load data for Slave ComboBox.');
        }
    });
}