ExtJs 6.0.0中如何通过REST PUT请求向Spring后端提交更新数据？

嘿，我来帮你捋清楚这个问题！你的核心困扰在于Store里的数据是通过setValue手动注入的，不是Proxy自动加载的，所以默认的record.save()没法直接满足你带额外数据的更新需求对吧？别慌，这里有几个实用的解决方案：

方案一：手动用Ext.Ajax发送PUT请求（最灵活） #

这个方法完全绕开Store的自动机制，直接构建请求，适合你需要额外添加数据的场景。你可以把更新属性和模态框收集的额外数据合并成请求体，直接发给后端：

updateRecord: function(objectId, objectWithUpdateProperties) {
    // 合并更新属性和额外数据（这里替换成你实际的额外字段）
    const requestPayload = {
        ...objectWithUpdateProperties,
        additionalField1: '从模态框获取的值',
        additionalField2: '其他额外数据'
    };

    Ext.Ajax.request({
        url: `/somepath/theclass/${objectId}`, // 后端REST PUT接口地址
        method: 'PUT',
        jsonData: requestPayload, // 自动序列化为JSON
        success: function(response) {
            const responseData = Ext.decode(response.responseText);
            // 请求成功后，同步更新Store里的对应记录
            const targetRecord = this.store.getById(objectId);
            if (targetRecord) {
                targetRecord.set(requestPayload);
            }
            Ext.Msg.alert('成功', '数据更新完成');
        },
        failure: function(response) {
            // 处理失败逻辑，比如提示用户
            Ext.Msg.alert('错误', `更新失败：${response.statusText}`);
        },
        scope: this // 确保success/failure里的this指向当前组件
    });
}

这个方案的好处是完全可控，不管Store数据是怎么来的，都能直接发送请求，而且可以自由组合任意需要的数据，特别适合你的场景。

方案二：标记手动添加的记录为非新增，复用Store Proxy #

如果你想复用Store已有的Proxy配置（比如URL、Writer设置），可以在setValue方法里给每条记录标记为非新增（phantom: false），这样ExtJS就会认为这些记录是从服务器来的，调用record.save()时会自动发PUT请求：

首先修改setValue方法：

setValue: function(myObject) {
    // 把原始数据转换成Store的Record实例，并标记为非新增
    const recordList = myObject.data.items.map(item => {
        const record = Ext.create(this.store.model, item);
        record.setId(item.id); // 确保记录ID正确
        record.phantom = false; // 关键：标记为已存在于服务器的记录
        return record;
    });
    this.store.setData(recordList);
}

然后修改updateRecord方法：

updateRecord: function(objectId, objectWithUpdateProperties) {
    const targetRecord = this.store.getById(objectId);
    if (!targetRecord) return;

    // 合并更新属性和额外数据
    const updateData = {
        ...objectWithUpdateProperties,
        additionalField: '额外数据内容'
    };

    // 更新记录属性
    targetRecord.set(updateData);

    // 调用save，此时会触发Proxy的PUT请求
    targetRecord.save({
        success: function(record, operation) {
            Ext.Msg.alert('成功', '数据更新成功');
        },
        failure: function(record, operation) {
            const errorMsg = operation.getError() || '更新失败';
            Ext.Msg.alert('错误', errorMsg);
        }
    });
}

这个方案适合想复用现有Proxy配置的情况，不用重复写URL和序列化逻辑。

方案三：直接调用Proxy的update方法 #

介于前两者之间，既复用Proxy的配置，又手动控制请求内容：

updateRecord: function(objectId, objectWithUpdateProperties) {
    const requestPayload = {
        ...objectWithUpdateProperties,
        additionalField: '额外数据'
    };

    const proxy = this.store.getProxy();
    proxy.update({
        url: `${proxy.url}/${objectId}`,
        jsonData: requestPayload,
        success: function(response) {
            const targetRecord = this.store.getById(objectId);
            if (targetRecord) {
                targetRecord.set(requestPayload);
            }
            Ext.Msg.alert('成功', '更新完成');
        },
        failure: function(response) {
            Ext.Msg.alert('错误', '更新失败，请重试');
        },
        scope: this
    });
}

总结 #

如果你的场景需要频繁添加额外数据，方案一是最推荐的，逻辑清晰且灵活；如果想复用Store的Proxy配置，方案二更合适。

内容的提问来源于stack exchange，提问作者Dirk Schumacher