一、截圖和示例共用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);
????????????????????????????}
????????????????????????});
????????????????????} 　　　　　　服務器端代碼： ????///?<summary>
????///?默認方式
????///?</summary>
????public?void?Submit2()
????{
????????string?param1?=?Request.QueryString["param1"];
????????string?param2?=?Request.Form["param2"];
????????//必須返回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方式",
????????????????????handler:function(){?
????????????????????????//注意
????????????????????????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);
????????????????????????????}
????????????????????????});
????????????????????} 　　　　　　服務器端代碼： ????///?<summary>
????///?Connect方式
????///?</summary>
????public?void?Submit3()
????{
????????string?param1?=?Request.QueryString["param1"];
????????string?param2?=?Request.Form["param2"];
????????Response.Write("ok");
????????Response.End();
????} 　　　　　　代碼說明：
　　　　　　　　這里就沒有限制返回的數據格式了，但仍需要設置Response.End()，所以默認在PageBase里面設置了此代碼。
　　　　3.3　　通過Ext.Ajax提交數據
　　　　　　客戶端代碼： ????????????????????//Ext.Ajax是繼承Ext.data.Connection而來
????????????????????text:?"Ajax方式",
????????????????????handler:function(){?
????????????????????????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);
????}
????}
????????});
????????????????????} 　　　　　　服務器端代碼： ????///?<summary>
????///?Ajax方式
????///?</summary>
????public?void?Submit4()
????{
????????string?param1?=?Request.QueryString["param1"];
????????string?param2?=?Request.Form["param2"];
????????Response.Write("yes");
????????Response.End();
????} 　　　　Ajax方式提交總結：
　　　　　　a).　　服務器端處理返回數據后都需要Response.End();
　　　　　　b).　　很明顯，Ajax的特點之一就是不刷新頁面，提高用戶體驗。
　　　　　　c).　　回調分為callback和success+failure兩種方式，后面是將前面的拆成2個函數來處理。
四、下載

　　　　ExtJS2009-10-2.rar

本文轉自博客園農民伯伯的博客，原文鏈接：ExtJs 備忘錄（4）—— Form表單（四） [ 數據提交 ]，如需轉載請自行聯系原博主。

總結

以上是生活随笔為你收集整理的ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。