Extjs如何根据后端返回的data.abc字段动态设置viewModel的description值

问题根因 #

ExtJS的ViewModel是响应式数据管理模块，直接修改viewModel.data.description不会触发绑定更新逻辑，必须使用ViewModel提供的set()方法更新数据才能联动刷新绑定的组件。

实现方案 #

方案1：请求回调直接更新description #

在拿到后端返回数据的回调逻辑中，调用ViewModel的set方法赋值即可：

// 后端接口请求回调示例
Ext.Ajax.request({
    url: '你的后端接口地址',
    success: function(res) {
        let resData = Ext.decode(res.responseText);
        // 判断abc字段存在再赋值
        if (resData?.data?.abc) {
            // 组件内调用示例，若上下文不是组件实例，先获取目标组件实例再调用getViewModel
            this.getViewModel().set('description', resData.data.abc);
        }
    },
    scope: this // 确保回调内this指向组件实例
});

方案2：通过ViewModel公式自动映射（更推荐） #

如果后续有多处依赖abc字段的逻辑，可以用formula做自动映射，不需要手动处理赋值逻辑：

1. 先修改ViewModel配置：

viewModel: {
    data: {
        // 预留abc字段存储后端返回值
        abc: '',
        // 可保留默认值，也可删除，由formula自动计算
        description: 'xyz'
    },
    formulas: {
        // 自动计算description的值
        description: function(get) {
            return get('abc') || 'xyz';
        }
    }
}

2. 后端请求回调只需要给abc赋值即可自动触发description更新：

if (resData?.data?.abc) {
    this.getViewModel().set('abc', resData.data.abc);
}

注意事项 #

• 不要直接修改viewModel.data下的属性值，所有响应式数据更新必须走set()方法才能触发绑定更新
• 确保调用getViewModel()时组件已经完成初始化，不要在initComponent生命周期的过早阶段调用，避免获取不到ViewModel实例

内容的提问来源于stack exchange，提问作者Aakash Singh