Extjs中store执行sync删除操作时如何仅传递ID字段给后端服务

核心原因 #

你当前配置中AmpelideWeb.model.Base的proxy.writer设置了writeAllFields: true，会序列化记录所有字段传递给后端，且ExtJS默认会将接口返回的未在Model中定义的字段也存入记录的data属性，所以就算精简Model字段也无法过滤额外返回的字段。

最优方案：全局配置writer过滤删除操作参数 #

修改基础Model的proxy.writer配置，新增transform钩子，仅在删除操作时返回ID字段，新增、更新操作保留原有逻辑：

Ext.define('AmpelideWeb.model.Base', {
    extend: 'Ext.data.Model',
    identifier: 'negative',
    idProperty: 'ID',
    inheritableStatics: {
        format: 'json',
        idParam: 'ID',
        readMethod: 'POST',
        costantUrl:'http://192.168.24.8:8080/API/v1/'
    },
    schema: {
        proxy: {
            type: 'ajax',
            idParam: '{idParam}',
            paramsAsJson: false,
            api: {
                create  : '{costantUrl}'+'{baseUrl}'+'/insert',
                read    : '{costantUrl}'+'{baseUrl}',
                update  : '{costantUrl}'+'{baseUrl}'+'/edit',
                destroy : '{costantUrl}'+'{baseUrl}'+'/delete'
            },
            actionMethods: {
                create: 'POST',
                read: '{readMethod}',
                update: 'POST',
                destroy: 'POST'
            },
            reader: {
                type: '{format}'
            },
            writer: {
                type: '{format}',
                writeAllFields: true,
                allowSingle: false,
                // 新增transform钩子过滤参数
                transform: function(data, request) {
                    // 删除操作仅返回ID字段
                    if (request.getAction() === 'destroy') {
                        return { ID: data.ID };
                    }
                    // 其他操作返回全量字段
                    return data;
                }
            }
        }
    }
});

可选优化：简化删除逻辑 #

你当前的删除代码创建了临时store再执行sync属于冗余操作，可直接调用Model实例的erase方法完成删除，无需依赖store：

onDeleteClick: function () {
    var form = Ext.getCmp('DettaglioVignaToponimo');
    let vignaToponimoIdDelete = this.vignaToponimoId;
    if (form.getValues().ID !== null){
        Ext.Msg.confirm('Eliminazione Vigne Toponimi', 'Se sicuro di voler eliminare il dato selezionato ?', function (id, value) {    
            if (id === 'yes') {
                // 直接创建Model实例调用erase方法
                const record = new AmpelideWeb.model.VignaToponimo({ID: vignaToponimoIdDelete});
                record.erase({
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    success: function () {
                        Ext.Msg.alert('Eliminazione dati Vigne Toponimi!', 'Eliminazione Vigne Toponimi avvenuta correttamente');
                    },
                    failure: function (record, operation) {
                        responseObj = operation.getError().response.responseJson;
                        Ext.Msg.alert('Eliminazione Vigne Toponimi fallita', 'messaggio di errore: ' + responseObj.message);
                    }
                });
            }
        })
    }else{
        Ext.Msg.alert('Eliminazione Vigne Toponimi fallito', 'messaggio di errore: ID Vigne Toponimi è null, nessun dato da eliminare.');
    }
}

局部生效方案 #

如果你仅想针对该业务Model生效、不需要全局修改，可在AmpelideWeb.model.VignaToponimo中单独覆盖proxy的writer配置即可。

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