ext通过一共下拉选框控制另一个下拉选框

在JavaScript库Ext JS中，可以使用选择器（Selectors）和联动功能（Dependent Select Fields or Drop-down cascading）来实现通过一个下拉列表（通常称为“上级”或“源”下拉框）控制另一个下拉列表（即“子级”或“目标”下拉框）。这种设计通常用于创建关联数据或预填充选项。

以下是基本步骤：

1. 创建两个Ext.form.field.ComboBox实例，分别代表上下级下拉列表。
2. 将上级下拉框的`select`事件绑定到一个函数中，该函数会在用户选择一个选项时触发。
3. 函数内部获取选中的值，并使用这个值作为查询条件，从服务器端或预先准备的数据中检索相关的子级选项。
4. 更新子级下拉框的store（数据集），使其只显示与上级匹配的选项。

示例代码片段（简化版）：

var parentField = Ext.create('Ext.form.field.ComboBox', {
    // 上级下拉框配置...
    listeners: {
        select: function(combo, record) {
            var parentId = combo.getValue(); // 获取上级选项ID
            if (parentId) {
                loadChildOptions(parentId); // 调用函数加载子级选项
            }
        }
    }
});

var childField = Ext.create('Ext.form.field.ComboBox', {
    // 子级下拉框配置...
    store: { // 初始数据，需要包含上级ID字段
        fields: ['id', 'name'],
        proxy: {
            type: 'ajax',
            url: '/api/get-child-options' // 预设请求URL
        }
    },
    displayField: 'name'
});

function loadChildOptions(parentId) {
    childField.store.load({ params: { parentId: parentId } }); // 根据父ID刷新子级store
}