learning extjs 中文版 表单提交

我们的表单还没有向服务器提交数据。所以我们需要添加提交按钮。

按钮要在按钮配置里添加，就和我们在表单里添加表单项一样。按钮需要两个参数：按钮上的文本和按钮事件。

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();

}

}]