Javascript Ext js 7 modern，form.submit vs ajax.request

我有一个Ext.form.Panel，上面有多个TextArea字段和文件输入，如下所示

// https://requestbin.com/r/en0ej96odon2sm/1n6r1tb49KK6eObGMPHlYa1hh4C

Ext.create({
    xtype: 'formpanel',
    renderTo: document.body,
    buttons: {
        submit: 'onSubmit',
    },

    controller: {

        onSubmit: function () {
            var form = this.getView();

            form.submit({
                method: 'POST',
                url: 'https://en0ej96odon2sm.x.pipedream.net/test1',
                success: function () {}
            });
        },

        onSubmitTest: function () {
            var form = this.getView();
            Ext.Ajax.request({
                url: 'https://en0ej96odon2sm.x.pipedream.net/test2',
                method: 'POST',
                params: {
                    data: form.getValues(),
                },
                success: function () {}
            });
        },

    },

    items: [{
        xtype: 'textareafield',
        name: 'testfield',
        label: 'testfield',
        value: 'test\nasd',
    }, {
        xtype: 'filefield',
        label: 'Upload Test',
        name: 'basedata-test',
    }, {
        xtype: 'button',
        text: 'Ajax.request(), linebreaks but no files',
        handler: 'onSubmitTest',
    }]
});

发布结果：

小提琴：

所以，由于我需要fileinput/multipart，我必须使用form.submit（{}）

但当我这样做时，我不会在我的$u POST Var中得到服务器端的换行符

当我执行ajax.request（{}）时，一切看起来都很好，但是$\文件丢失了，所以这不是一个真正的选项。（但这是有记录的）

我还尝试将jsonSubmit添加到表单中（然后我根本没有收到任何$\u帖子）。 当我添加enablesmitmissionform:false时，我得到了换行符，但是在提交之后，表单消失了（我不知道为什么）

---

是否有解决方案，或者我做错了什么？

您可以使用以下覆盖。希望它不会使框架不稳定；）

//https://requestbin.com/r/en0ej96odon2sm/1n6r1tb49KK6eObGMPHlYa1hh4C
//凌驾
Ext.define（'overrides.form.Panel'{
覆盖：“Ext.form.Panel”，
私人：{
createSubmissionForm：函数（表单、值）{
var fields=this.getFields（），
名称、输入、字段、fileTrigger、inputDom；
if（form.nodeType==1）{
form=form.cloneNode（false）；
for（值中的名称）{
输入=document.createElement（'textarea'）；
setAttribute（'type'，'string'）；
input.setAttribute（'name'，name）；
input.innerHTML=值[名称]；
表单。追加子项（输入）；
}
}
for（字段中的名称）{
if（字段.hasOwnProperty（名称））{
字段=字段[名称]；
if（field.isFile）{
//文件字段的最新名称是其“文件”触发器按钮。
fileTrigger=field.getTriggers（）.file；
inputDom=fileTrigger&&fileTrigger.getComponent（）.buttonElement.dom；
if（inputDom）{
如果（！form.$fileswap）{
格式：$fileswap=[]；
}
input=inputDom.cloneNode（true）；
inputDom.parentNode.insertBefore（input，inputDom.nextSibling）；
form.appendChild（inputDom）；
表单。$fileswap.push({
原文：inputDom，
占位符：输入
});
}
}else if（field.isPassword）{
if（field.getInputType（）！=='password'）{
字段。setdiscovered（false）；
}
}
}
}
申报表；
}
}
});
外部创建({
xtype:'formpanel'，
renderTo:document.body，
按钮：{
提交：“onSubmit”，
},
控制器：{
onSubmit:函数（）{
var form=this.getView（）；
提交表格({
方法：“POST”，
网址：'https://en0ej96odon2sm.x.pipedream.net/test1',
成功：函数（）{}
});
},
onSubmitter:函数（）{
var form=this.getView（）；
Ext.Ajax.request({
网址：'https://en0ej96odon2sm.x.pipedream.net/test2',
方法：“POST”，
参数：{
数据：form.getValues（），
},
成功：函数（）{}
});
},
},
项目：[{
xtype:'textareafield'，
名称：'testfield'，
标签：“测试字段”，
值：“test\nasd”，
}, {
xtype:'filefield'，
标签：“上传测试”，
名称：“basedata测试”，
}, {
xtype:'按钮'，
文本：“Ajax.request（），换行符，但没有文件”，
处理程序：“onSubmitTest”，
}]
});

您可以使用以下覆盖。希望它不会使框架不稳定；）

//https://requestbin.com/r/en0ej96odon2sm/1n6r1tb49KK6eObGMPHlYa1hh4C
//凌驾
Ext.define（'overrides.form.Panel'{
覆盖：“Ext.form.Panel”，
私人：{
createSubmissionForm：函数（表单、值）{
var fields=this.getFields（），
名称、输入、字段、fileTrigger、inputDom；
if（form.nodeType==1）{
form=form.cloneNode（false）；
for（值中的名称）{
输入=document.createElement（'textarea'）；
setAttribute（'type'，'string'）；
input.setAttribute（'name'，name）；
input.innerHTML=值[名称]；
表单。追加子项（输入）；
}
}
for（字段中的名称）{
if（字段.hasOwnProperty（名称））{
字段=字段[名称]；
if（field.isFile）{
//文件字段的最新名称是其“文件”触发器按钮。
fileTrigger=field.getTriggers（）.file；
inputDom=fileTrigger&&fileTrigger.getComponent（）.buttonElement.dom；
if（inputDom）{
如果（！form.$fileswap）{
格式：$fileswap=[]；
}
input=inputDom.cloneNode（true）；
inputDom.parentNode.insertBefore（input，inputDom.nextSibling）；
form.appendChild（inputDom）；
表单。$fileswap.push({
原文：inputDom，
占位符：输入
});
}
}else if（field.isPassword）{
if（field.getInputType（）！=='password'）{
// https://requestbin.com/r/en0ej96odon2sm/1n6r1tb49KK6eObGMPHlYa1hh4C

// Override
Ext.define('overrides.form.Panel', {
    override: 'Ext.form.Panel',
    privates: {
        createSubmissionForm: function (form, values) {
            var fields = this.getFields(),
                name, input, field, fileTrigger, inputDom;

            if (form.nodeType === 1) {
                form = form.cloneNode(false);

                for (name in values) {
                    input = document.createElement('textarea');
                    input.setAttribute('type', 'string');
                    input.setAttribute('name', name);
                    input.innerHTML = values[name];
                    form.appendChild(input);
                }
            }

            for (name in fields) {
                if (fields.hasOwnProperty(name)) {
                    field = fields[name];

                    if (field.isFile) {
                        // The <input type="file"> of a FileField is its "file" trigger button.
                        fileTrigger = field.getTriggers().file;
                        inputDom = fileTrigger && fileTrigger.getComponent().buttonElement.dom;

                        if (inputDom) {
                            if (!form.$fileswap) {
                                form.$fileswap = [];
                            }

                            input = inputDom.cloneNode(true);
                            inputDom.parentNode.insertBefore(input, inputDom.nextSibling);
                            form.appendChild(inputDom);
                            form.$fileswap.push({
                                original: inputDom,
                                placeholder: input
                            });
                        }
                    } else if (field.isPassword) {
                        if (field.getInputType() !== 'password') {
                            field.setRevealed(false);
                        }
                    }
                }
            }

            return form;
        }
    }
});

Ext.create({
    xtype: 'formpanel',
    renderTo: document.body,
    buttons: {
        submit: 'onSubmit',
    },

    controller: {

        onSubmit: function () {
            var form = this.getView();

            form.submit({
                method: 'POST',
                url: 'https://en0ej96odon2sm.x.pipedream.net/test1',
                success: function () {}
            });
        },

        onSubmitTest: function () {
            var form = this.getView();
            Ext.Ajax.request({
                url: 'https://en0ej96odon2sm.x.pipedream.net/test2',
                method: 'POST',
                params: {
                    data: form.getValues(),
                },
                success: function () {}
            });
        },

    },

    items: [{
        xtype: 'textareafield',
        name: 'testfield',
        label: 'testfield',
        value: 'test\nasd',
    }, {
        xtype: 'filefield',
        label: 'Upload Test',
        name: 'basedata-test',
    }, {
        xtype: 'button',
        text: 'Ajax.request(), linebreaks but no files',
        handler: 'onSubmitTest',
    }]
});

form.submit({
            method: 'POST',

            //just like the ajax
            params: {
                data: form.getValues(),
            },
            url: 'https://en0ej96odon2sm.x.pipedream.net/test1',
            success: function () {}
        });

Ext.define('Override.data.request.Ajax', {
  override: 'Ext.data.request.Ajax',
  setupHeaders: function(xhr, options, data, params) {
    if (data instanceof FormData) {
      if (Ext.apply({}, options.headers || {}, this.defaultHeaders).hasOwnProperty('Content-Type')) {
        console.warn('The Content-Type header must not be set before request if you need to use FormData with this override');
      }
      /* prevent Ext.data.request.Ajax from setting Content-Type header */
      return this.callParent([xhr, options, null, null]);
    } else {
      return this.callParent(arguments);
    }
  }
});

var formData = new FormData();
var files = myView.down('filefield').getFiles();
if (files.length > 0) {
  formData.append('file', files[0], files[0].name);
}
Ext.Ajax.request({
  url: 'your_url',
  rawData: formData,
  success: function(response) {
    // handle success
  },
  failure: function(response) {
    // handle failure
  }
});