本文介绍如何在FormPanel中添加提交按钮及重置按钮，并通过异步方式提交数据到服务器，同时处理服务器返回的成功或失败信息。
我们的表单还没有向服务器提交数据。所以我们需要添加提交按钮。
按钮要在按钮配置里添加，就和我们在表单里添加表单项一样。按钮需要两个参数：按钮上的文本和按钮事件。
buttons: [{
text: 'Save',
handler: function(){
movie_form.getForm().submit({
success: function(f,a){
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f,a){
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Reset',
handler: function(){
movie_form.getForm().reset();
}
}]
FormPanel有个url配置了表单提交地址。像html的表单一样，我们可以把数据提交的服务器端。在Save按钮里我们定义了一个匿名函数，用来把数据异步提交的服务器，所以页面并没有刷新。记得这个例子要在服务器上才能跑，因为用到了ajax。
movie_form.getForm().submit({
success: function(f,a){
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f,a){
Ext.Msg.alert('Warning', 'Error');
}
});
Success和failure处理了服务器的响应结果，也是匿名函数。你可以看到，这两个函数需要一对参数，是服务器返回的。现在我们就来看下服务器需要返回什么?
当表单将数据提交到服务器端，服务器端的脚本就要取出表单里的数据，并向客户端返回是否成功的信息。如果出错了，错误信息还应当跟表单项绑定。下面给了一个例子：
{
success: false,
errors: {
title: "Sounds like a Chick Flick"
}
}
当success标签为false时，Ext 表单就要读取错误信息，并显示在form的相应位置上。
我们还可以给出额外的错误信息，如：
{
success: false,
errors: {
title: "Sounds like a Chick Flick"
},
errormsg: "That movie title sounds like a chick flick."
}
这个额外的错误信息我们用一个弹出窗口显示。
buttons: [{//copyright guoyiqi
text: 'Save',
handler: function(){
movie_form.getForm().submit({
success: function(f,a){
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f,a){
Ext.Msg.alert('Warning', a.result.errormsg);
}
});
}
}, {
text: 'Reset',
handler: function(){
movie_form.getForm().reset();
}
}]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
