ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ]

前言
　　 忙的时候再一懒、再加上中途没能迅速解决一些问题，所以把文章拖延到了国庆，不过总算是在今天搞定了。这系列文章可能全部完成可能需要继续延后了，有计划继续写视频监控方面的文章，所以尽量合理安排吧 : ) 系列
　　1.　　 ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ] 　　2.　　 ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ] 　　3.　　 ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ] 　　4.　　 ExtJs 备忘录（4）—— Form表单（四） [ 数据提交 ] 推荐
　　1.　　 EXTJS FORM技巧一表单不使用AJAX方式提交? 　　2.　　 三种Ext提交数据的方法

　　3.　　 ExtJS表单提交与加载全攻略 版本
　　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);                            }                        });                    }

　　　　　　服务器端代码：

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

                              注：;但经博主实验，使用 Response.Flush();     Response.Close();  也可以实现向前台传输,尤其是交由后台的ashx文件处理时，ashx文件最后使用Response.Flush();     Response.Close(); 才能在前台得到结果.asp.net中ext中的表格从后台取数据同样也需要在拼接完成json数据交给前台的Ext.data.Store中的httpProxy属性后加上此句，例如后台：

[html]  view plain copy

1. protected void Page_Load(object sender, EventArgs e)  
2. {  
3.     int start = Convert.ToInt32(Request.Params["start"]);  
4.     int limit = Convert.ToInt32(Request.Params["limit"]);  
5.     StringBuilder sb = new StringBuilder("{recordCount:100,result:[");  
6.     for (int i = start; i < (start + limit); i++)  
7.     {  
8.         sb.Append("{id:")  
9.             .Append(i)  
10.             .Append(",name:'name")  
11.             .Append(i)  
12.             .Append("',descn:'descn")  
13.             .Append(i)  
14.             .Append("'},");  
15.     }  
16.     sb.Remove(sb.Length - 1, 1).Append("]}");  
17.     Response.Write(sb.ToString());  
18.   
19.     Response.End();  
20.     //Response.Flush();  
21.     //Response.Close();   
22.   
23. }  

前台：

[html]  view plain copy

1.              var cm = new Ext.grid.ColumnModel([  
2.     { header: '编号', dataIndex: 'id' },  
3.     { header: '名称', dataIndex: 'name' },  
4.     { header: '描述', dataIndex: 'descn' }  
5. ]);  
6.   
7.              var store = new Ext.data.Store({  
8.   
9.                  proxy: new Ext.data.HttpProxy({ url: 'Default.aspx?start=0&limit=10', method: 'GET' }),  
10.   
11.                  reader: new Ext.data.JsonReader({  
12.                      totalProperty: 'recordCount',  
13.                      root: 'result'  
14.                  }, [  
15.                        { name: 'id' },  
16.                        { name: 'name' },  
17.                        { name: 'descn' }  
18.                  ])  
19.              });  
20.              store.load({ params: { start: 0, limit: 10} });  
21.   
22.              var grid = new Ext.grid.GridPanel({  
23.                  renderTo: 'grid',  
24.                  autoHeight: true,  
25.                  store: store,  
26.                  cm: cm,  
27.                  bbar: new Ext.PagingToolbar({  
28.                      pageSize: 10,  
29.                      store: store,  
30.                      displayInfo: true,  
31.                      displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',  
32.                      emptyMsg: "没有记录"  
33.                  })  
34.              });  

　　　　　　　　写测试代码的时候就是因为没有按这个格式返回，一直以为客户端代码是否有问题，耽误了挺多时间。

　　　　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

结束语
　　关于本章的内容项目的时候研究不多，一般够用就没有再深究，这里比较多的是搜集而来然后进行整理实践再写出来的，难免不全，欢迎大家补充 :)