ExtJS 7.5.1自定义ComboBox绑定departmentTypeId值为空的解决咨询

问题分析 #

当前实现存在两个核心问题：

1. 自定义ComboBox的departmentTypeId未纳入ExtJS的config系统，框架无法正确追踪绑定赋值时机，导致ViewModel的formula在组件属性还未完成绑定赋值时就执行，拿到null。
2. ViewModel的formula仅在初始化时直接读取组件属性，未监听属性变化，后续属性更新无法同步到formula。

具体修改方案 #

1. 将ComboBox的departmentTypeId改为config属性

让ExtJS框架自动处理属性的绑定与更新逻辑，替代手动编写的setDepartmentTypeId（若无需自定义逻辑可直接删除该方法）：

Ext.define('vkr.components.comboboxes.DepartmentCombo', {
    extend: 'Ext.form.field.ComboBox',
    // 指定关联的ViewModel
    viewModel: 'department_combo',
    // 纳入config系统，支持绑定追踪
    config: {
        departmentTypeId: null
    },
    bind: {
        store: '{cathedra}'
    }
    // 若需自定义赋值逻辑，保留以下方法并调用setConfig
    // setDepartmentTypeId: function(value) {
    //     this.setConfig('departmentTypeId', value);
    // }
});

2. 修改ViewModel的formula，监听组件属性变化

通过bind配置监听组件的departmentTypeId属性，确保属性更新时formula能实时同步值：

Ext.define('vkr.components.DepartmentComboViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.department_combo',
    formulas: {
        departmentTypeId: {
            // 监听组件的departmentTypeId属性
            bind: '{view.departmentTypeId}',
            get: function(value) {
                return value;
            }
        }
    },
    stores: {
        cathedra: {
            // ... 原有store配置
            proxy: {
                // ... 原有proxy配置
                extraParams: {
                    department_type_id: '{departmentTypeId}'
                }
            }
        }
    }
});

3. 简化父窗口的参数设置逻辑

无需手动调用notify()，ViewModel的set方法会自动触发绑定更新：

win.getViewModel().set("department_type_id", department_type_id);

原理说明 #

• 将属性纳入config系统后，ExtJS的绑定机制会自动管理属性的赋值与变化通知，确保组件的departmentTypeId能及时从父ViewModel获取值。
• ViewModel的formula通过bind监听组件属性，替代一次性读取，保证后续属性更新能同步到store的extraParams，最终传递到请求参数中。

内容的提问来源于stack exchange，提问作者Kamo Petrosyan