Ext JS 4的文件上传和内部服务器错误
这里我们再次使用Ext JS。Ext JS 4的文件上传和内部服务器错误
假设我有一个文件上传(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.Error.handle来处理错误,使用Ext.Msg来显示错误消息abd return false。这很棘手。
通过处理错误我可以检查错误事件并检索一些错误信息。 显示错误消息是更棘手的部分,因为上传的进度条使用Ext.Msg后面的相同基础结构,Ext.Msg有一个错误,它不允许程序员将它称为队列,显示一条消息,然后显示下一条消息用户单击确定。它总是擦除前一个并显示新的。 如果用户决定了两个路径并且问题消息框将会简单地消失,此行为可能会导致可怕的错误! 最后,我们返回false并将错误打印在控制台中。如果我们在这一点上返回true,调用函数将继续执行并导致问题,因为预期的信息很可能不会在那里。
这个解决方案很棘手,很脏,而且根本不舒服。它适用于我现在,但我知道我会很快后悔它:P
我认为最干净的方法,将为您使用表单提交失败回调来处理内部服务器(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);
}
}
});
只需使用静态方法创建一个ExtJS类,并在'form.submit({})'调用中重用它。对于商店同步错误,最好是倾听代理错误。 – 2013-11-18 12:39:10