我们的表单还没有向服务器提交数据。所以我们需要添加提交按钮。
按钮要在按钮配置里添加,就和我们在表单里添加表单项一样。按钮需要两个参数:按钮上的文本和按钮事件。
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();
}
}]