javascript - Ext JS 4的文件上传和内部服务器错误

Question

在这里，我们再次使用Ext JS。

假设我有一个文件上传(Ext.form.field.File)字段，它将图像提交到应用程序的Web服务器。

每当我在表单提交中收到内部服务器错误(状态代码= 500)时(即:发布的文件大于Web服务器的最大请求长度)，Ext就会在浏览器的控制台上引发异常。

如果像这样覆盖Ext.Error.handle，我可以立即捕获错误:

<!-- language: js -->
Ext.Error.handle = function (err) {

    switch (err.sourceClass) {
        case "Ext.JSON":
            {
                var arr = err.msg.split('\n');
                var msg = arr[0];
                arr.shift();
                var serverMsg = arr.join('\n');

                LogManager.error(msg);
                return true;
            }
        default:
            {
                if (err.msg) {
                    LogManager.error(err.msg);
                    return true;
                }
            }
            return false;
    }
}

问题是无论我是否捕获到错误，Ext创建的模式进度条是否仍会显示，这意味着我的应用程序已永久锁定。

问题是:如何使Ext触发表单的失败回调并以一种愉快的方式关闭进度栏？

Answer 1

我认为最干净的方法是让您利用表单提交失败回调来处理内部server(500)错误。

有关更多信息，请参阅文档http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-submit。

您可以设置一个waitMsg属性，您将看到Ext将自动取消显示的消息。像这样

myFormPanel.getForm().submit({
    clientValidation: true,
    waitMsg: 'Uploading image...',
    url: 'updateConsignment.php',
    params: {
        newStatus: 'delivered'
    },
    success: function(form, action) {
       Ext.Msg.alert('Success', action.result.msg);
    },
    failure: function(form, action) {
        switch (action.failureType) {
            case Ext.form.action.Action.CLIENT_INVALID:
                Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
                break;
            case Ext.form.action.Action.CONNECT_FAILURE:
                Ext.Msg.alert('Failure', 'Ajax communication failed');
                break;
            case Ext.form.action.Action.SERVER_INVALID: //For your 500
               Ext.Msg.alert('Failure', action.result.msg);
       }
    }
});