前言
忙的時候再一懶、再加上中途沒能迅速解決一些問題，是以把文章拖延到了國慶，不過總算是在今天搞定了。這系列文章可能全部完成可能需要繼續延後了，有計劃繼續寫視訊監控方面的文章，是以盡量合理安排吧 : )
系列
推薦
版本
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