为什么成功回调在extjs表单提交中不被调用？ [英] Why success callback is not called in extjs form submission?

问题描述

我正在尝试使用Ext JS表单上传文件，并在成功或失败的情况下显示适当的消息。但是我不能得到所需的结果。我无法使成功或失败回调在 form.submit 动作。

我现在做的是：

使用此脚本创建表单：

 新的Ext.FormPanel（{
 fileUpload：true，
 frame：true，
 url：'/ profiler / certificate / update'，
 success：function（）{
 console.log（arguments）; 
}，
 failure：function（）{
 console。 log（arguments）; 
} 
}）getForm（）。submit（）
 
 
 / * 
响应Content-Type为文本/ html（带charcode = utf8）; 
响应JSON是：{success：true} 
 * / 
  

根据内容类型到 text / html stackoverflow.com/a/6227369/811785\">这个答案。

根据 Ext JS docs 。通过Fiddler捕获的响应是：

  {success：false} 
  / pre> 
 
 
或
  {success：true} 
  
我甚至将响应Content-Type设置为 application / json 。但是仍然没有成功。
 
 
 
我已经阅读了和这个，但没有一个帮助。请注意，我还尝试了另一个创建一个表单的脚本，其中有一个上传字段和一个保存按钮，我将表单提交到保存按钮的处理程序中。但是仍然没有回调。 
解决方案
这是一个工作示例 -  Javascript代码：
  Ext.onReady（function（）{
 
 Ext.define（'ImagePanel'，{
 extends：'Ext.form.Panel'，
 fileUpload：true，
 title：'Upload Panel'，
 width：300，
 height：100，
 
 onUpload：function（）{
 this .getForm（）。submit（{
 url：'upload.php'，
 scope：this，
 success：function（formPanel，action）{
 var data =解码（action.response.responseText）; 
 alert（Success：+ data.msg）; 
}，
 failure：function（formPanel，action）{
 var data = Ext.decode（action.response.responseText）; 
 alert（Failure：+ data.msg）; 
} 
}）; 
}，
 
 initComponent：function（）{
 var config = {
 items：[
 {
 xtype：'fileuploadfield'，
 buttonText：'上传'，
名称：'uploadedFile'，
 listeners：{
'change'：{
 scope：this，
 fn：function（field，e） 
 this.onUpload（）; 
} 
} 
} 
} 
] 
}; 
 
 Ext.apply（this，Ext.apply（this.initialConfig，config））; 
 this.callParent（arguments）; 
} 
}）; 
 
 
 var panel = Ext.create（'ImagePanel'，{
 renderTo：Ext.getBody（）
}）; 
}）; 
  
和PHP代码：
 <？php 
 if（isset（$ _ FILES））{
 $ temp_file_name = $ _FILES ['uploadedFile'] ['tmp_name']; 
 $ original_file_name = $ _FILES ['uploadedFile'] ['name']; 
 
 echo'{success：true，msg：'。$ original_file_name。'}'; 
 
} else {
 echo'{success：false，msg：无文件}'; 
} 
  
 
I'm trying to upload a file using Ext JS forms and in case of success or failure, show appropriate messages. But I'm not able to get the desired result. I'm not able to make success or failure callbacks work in form.submit action. 

What I've done till now is:

Creating a form with this script:
new Ext.FormPanel({
    fileUpload: true,
    frame: true,
    url: '/profiler/certificate/update',
    success: function() {
        console.log(arguments);
    },
    failure: function() {
        console.log(arguments);
    }
}).getForm().submit()


​/*
    The response Content-Type is text/html (with charcode=utf8);
    The response JSON is: { "success": true }
*/​​
Setting the response Content-Type to text/html based on this answer.

Sending an appropriate JSON result back, based on Ext JS docs. The response captured via Fiddler is:
{"success":false}
or
{"success":true}
I even set the response Content-Type to application/json. But still no success.

I've read links like this and this, but none of them helped. Please note that I also tried another script which creates a form, with an upload field in it, and a save button, and I submitted the form in the handler of the save button. But still no callback is fired. 
解决方案
Here's a working example - Javascript code:
Ext.onReady(function () {

    Ext.define('ImagePanel', {
        extend: 'Ext.form.Panel',
        fileUpload: true,
        title: 'Upload Panel',
        width: 300,
        height: 100,

        onUpload: function () {
            this.getForm().submit({
                url: 'upload.php',
                scope: this,
                success: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Success: " + data.msg);
                },
                failure: function (formPanel, action) {
                    var data = Ext.decode(action.response.responseText);
                    alert("Failure: " + data.msg);
                }
            });
        },

        initComponent: function () {
            var config = {
                items: [
                    {
                        xtype: 'fileuploadfield',
                        buttonText: 'Upload',
                        name: 'uploadedFile',
                        listeners: {
                            'change': {
                                scope: this,
                                fn: function (field, e) {
                                    this.onUpload();
                                }
                            }
                        }
                    }
                ]
            };

            Ext.apply(this, Ext.apply(this.initialConfig, config));
            this.callParent(arguments);
        }
    });


    var panel = Ext.create('ImagePanel', {
        renderTo: Ext.getBody()
    });
});
And PHP code:
<?php
if (isset($_FILES)) {
    $temp_file_name = $_FILES['uploadedFile']['tmp_name'];
    $original_file_name = $_FILES['uploadedFile']['name'];

    echo '{"success": true, "msg": "'.$original_file_name.'"}';

} else {
    echo '{"success": false, "msg": "No Files"}';
}


                        
这篇关于为什么成功回调在extjs表单提交中不被调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！