Ext js 7 现代，form.submit 与 ajax.request

问题描述

我有一个带有多个 textareafield 和 fileinput 这样的 Ext.form.Panel

// 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(),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',}]
});

发布结果： https://requestbin.com/r/en0ej96odon2sm/1n6mtu8QtyreaisCAmV3csO724Q

小提琴： https://fiddle.sencha.com/#view/editor&fiddle/3b9j

所以，因为我需要 fileinput/multipart，所以我必须使用 form.submit({})。

但是当我这样做时，我的 $_POST Var 中没有服务器端的换行符。

当我执行 ajax.request({}) 时，一切看起来都不错，但缺少 $_FILES，所以这不是一个真正的选择。（但这是记录在案的）。

我也尝试将 jsonSubmit 添加到表单中（然后我根本没有 $_POST ）。当我添加 enableSubmissionForm: false 时，我得到了换行符，但提交后表单消失了（我不知道为什么）。

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

解决方法

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

<Project Sdk="Microsoft.NET.Sdk">

不理想，但您也可以这样做：

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

这是使用 Ajax.request 而不是 form.submit 的简单解决方法

我需要它，因为我必须设置一个 Authorization 标头，而框架使用的 IFRAME 无法做到这一点

因此阻止 Ext.data.request.Ajax 设置 Content-Type 标头似乎可以完成这项工作。

multipart/form-data 将自动设置。

警告：options.headers 和 defaultHeaders 都不应该有“Content-Type”标头

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,null,null]);
    } else {
      return this.callParent(arguments);
    }
  }
});

并使用 FormData 作为 rawData

调用 Ajax.request

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
  }
});

extjs extjs7 javascript