前言
忙的时候再一懒、再加上中途没能迅速解决一些问题，所以把文章拖延到了国庆，不过总算是在今天搞定了。这系列文章可能全部完成可能需要继续延后了，有计划继续写视频监控方面的文章，所以尽量合理安排吧 : )
系列
推荐
版本
ext 3.0
正文
一、截图和示例共用ext.formpanel
1.1 截图
由于本文主要关注的是表单提交的几种方式，所以仅用了一个表单项以便于测试和减少示例代码。
1.2 示例共用ext.formpanel
<script type="text/javascript">
ext.onready(function() {
ext.quicktips.init();
ext.form.field.prototype.msgtarget = 'side';
var form1 = new ext.formpanel({
frame: true,
renderto: ext.getbody(),
title: '<center>表单提交</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
labelalign: 'right',
labelwidth: 170,
buttonalign:'center',
items: [new textfield('param2','表单项')]
});
});
</script>
关于封装后的表单控件，可以参照系列的前几篇文章，也可以在后面的源代码里面找到相关的封装代码。
二、普通方式提交
适合一次操作页面，即提交后跳转到另外一个页面。
前台代码：
text: "普通方式",
handler:function(){
if(form1.form.isvalid()){
//只用指定textfield的id或者name属性，服务器端form中就能取到表单的数据
//如果同时指定了id和name，那么name属性将作为服务器端form取表单数据的key
var form = form1.getform().getel().dom;
form.action = 'submit.aspx?method=submit1&param1=abc';
//指定为get方式时,url中指定的参数将失效，表单项转换成url中的key=value传递给服务端
//例如这里指定为get的话,url为:submit.aspx?param2=你输入的值
//form.method = 'get';//get、post
form.submit();
}
}
代码说明：这段代码加在buttons:[{}]里面中。
后台代码：
/// <summary>
/// post普通提交
/// </summary>
/// <returns></returns>
public void submit1()
{
//数据库操作
string param1 = request.querystring["param1"];
string param2 = request.form["param2"];
//response.write(string.format("param1(get):{0}<br />param2(post):{1}<br />", request.querystring["param1"], request.form["param2"]));
//页面掉转
response.redirect("esayadd.aspx");
}
普通提交我也翻阅了不少文章，在3.0版本中可以如上实现比较简单，或者直接设置formpanel的standardsubmit:true属性，则下面默认ajax提交方式也将变成普通的表单提交。注意这里并不需要设置 onsubmit: ext.emptyfn等，表单项的id和name指定也在注释里面有说明了。
三、ajax方式提交
3.1 默认方式
客户端代码：
text: "默认方式",
handler:function(){
form1.getform().submit({
url:'submit.aspx?method=submit2&param1=abc',
//method:'post',
//waittitle : "提示",
//waitmsg: 'submitting your data
',
success: function(form, action){
alert(action.response.responsetext);
},
failure: function(form, action){
alert(action.result.errormsg);
}
});
服务器端代码：
/// 默认方式
public void submit2()
//必须返回josin形式数据
response.write("{success:true}");
response.end();
代码说明：
a). 服务器端必须返回json格式，success返回true则执行success: function(form, action)里面的代码，返回false则执行failure: function(form, action)中的代码。
b). 服务器端必须response.end();
写测试代码的时候就是因为没有按这个格式返回，一直以为客户端代码是否有问题，耽误了挺多时间。
3.2 通过ext.data.connection提交数据
text: "connect方式",
//注意
var conn = new ext.data.connection();
conn.request({
url: 'submit.aspx?method=submit4',
//此处与params对应，如果为post，则服务器端从request.form中可以取得到数据，反之从querystring中取数据
method: 'post',//get
params:form1.form.getvalues(),
success: function(response, opts) {
msginfo(response.responsetext);
/// connect方式
public void submit3()
response.write("ok");
这里就没有限制返回的数据格式了，但仍需要设置response.end()，所以默认在pagebase里面设置了此代码。
3.3 通过ext.ajax提交数据
//ext.ajax是继承ext.data.connection而来
text: "ajax方式",
ext.ajax.request({
url: 'submit.aspx?method=submit3',
method: 'post',
//jsondata://指定需要发送给服务器端的json数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
//xmldata://指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
params:form1.form.getvalues(),//取得key/value对象数组
//指定ajax请求的回调函数，该函数不管是调用成功或失败，都会执行。
callback: function (options, success, response) {
if(success){
msginfo(response.responsetext);
/// ajax方式
public void submit4()
response.write("yes");
ajax方式提交总结：
a). 服务器端处理返回数据后都需要response.end();
b). 很明显，ajax的特点之一就是不刷新页面，提高用户体验。
c). 回调分为callback和success+failure两种方式，后面是将前面的拆成2个函数来处理。
四、下载
<a target="_blank" href="http://files.cnblogs.com/over140/2009/10/extjs2009-10-2.rar">extjs2009-10-2.rar</a>
结束语
关于本章的内容项目的时候研究不多，一般够用就没有再深究，这里比较多的是搜集而来然后进行整理实践再写出来的，难免不全，欢迎大家补充 :)
转载：http://www.cnblogs.com/over140/archive/2009/10/02/1573948.html