ExtJS表单提交与加载全攻略

ExtJS用formPanel来做为表单元素的容器。默认情况下&＃xff0c;是使用Ajax异步提交。接下来&＃xff0c;对formPanel的提交跟加载&＃xff0c;做个小总结。

先来看布局代码

 1 var frm
 2 Ext.onReady(function() {
 3     Ext.QuickTips.init();
 4     Ext.form.Field.prototype.msgTarget &＃61; &＃39;under&＃39;;
 5     new Ext.FormPanel({
 6         labelWidth: 75,
 7         id: &＃39;frm&＃39;,
 8         frame: true,
 9         title: &＃39;simple form&＃39;,
10         bodyStyle: &＃39;padding: 5px&＃39;,
11         width: 350,
12         defauls: { width: 230 },
13         defaultType: &＃39;textfield&＃39;,
14         applyTo: &＃39;con&＃39;,
15         autoHeight: true,
16         items: [
17             {
18                 fieldLabel: &＃39;First Name&＃39;,
19                 name: &＃39;first&＃39;,
20                 allowBlank: false
21             }, {
22                 fieldLabel: &＃39;Last Name&＃39;,
23                 name: &＃39;last&＃39;
24             }, {
25                 fieldLabel: &＃39;Company&＃39;,
26                 name: &＃39;company&＃39;
27             }, {
28                 fieldLabel: &＃39;Email&＃39;,
29                 name: &＃39;email&＃39;,
30                 vtype: &＃39;email&＃39;,
31                 allowBlank: false
32             }, {
33                 xtype: &＃39;timefield&＃39;,
34                 fieldLabel: &＃39;Time&＃39;,
35                 name: &＃39;time&＃39;,
36                 minValue: &＃39;8:00am&＃39;,
37                 maxValue: &＃39;6:00pm&＃39;,
38                 allowBlank: true
39             }
40         ],
41         buttons: [
42             { text: &＃39;Save&＃39;, handler: submit },
43             { text: &＃39;load&＃39;, handler: load },
44             { text: &＃39;Reset&＃39;, handler: reset }
45         ]
46     });
47     frm &＃61; Ext.getCmp(&＃39;frm&＃39;);
48 });

效果如下&＃xff1a;

变量frm是全局变量&＃xff0c;用以保存对formPanel的引用。

一、提交数据

 1 function submit() {
 2     if (!frm.getForm().isValid()) return;
 3     frm.getForm().submit({
 4         waitMsg: &＃39;正在提交数据&＃39;,
 5         waitTitle: &＃39;提示&＃39;,
 6         url: &＃39;submit.ashx&＃39;,//这里没使用asp.net网页
 7         method: &＃39;GET&＃39;,//指定为GET方式时,url中指定的参数将失效&＃xff0c;表单项转换成url中的key&＃61;value传递给服务,见http://blog.csdn.net/goodshot/article/details/9116973
 8         success: function(form, action) {
 9             Ext.Msg.alert(&＃39;提示&＃39;, &＃39;保存成功&＃39;);
10         },
11         failure: function(form, action) {
12             Ext.Msg.alert(&＃39;提示&＃39;, &＃39;原因如下&＃xff1a;&＃39; &＃43; action.result.errors.info);
13         }
14     });
15 }

 服务器端代码&＃xff1a;

 1<%&＃64; WebHandler Language&＃61;"C#" Class&＃61;"submit" %>
 2
 3using System;
 4using System.Web;
 5
 6public class submit : IHttpHandler {
 7    
 8    public void ProcessRequest (HttpContext context) {
 9        context.Response.ContentType &＃61; "text/json";
10        bool result &＃61; false;
11        // 简单的业务逻辑省略。可以从context.Request["表单的ID"]来读取从formPanel传递过来的表单值。
12        // 再根据这些值。做一系列的业务逻辑处理。
13        // 以下是提交成功与否&＃xff0c;所做出的反馈。
14        if (result)
15        {
16            context.Response.Write("{ success: true, errors:{} }");
17        }
18        else
19        {
20            context.Response.Write("{ success: false, errors:{info: &＃39;错误了&＃39;} }");
21        }
22        
23    }
24 
25    public bool IsReusable {
26        get {
27            return false;
28        }
29    }
30
31}

注意&＃xff0c;无论成功与否&＃xff0c;服务器端返回的JSON代码&＃xff0c;一定要符合如下格式&＃xff08;博主注&＃xff1a;下面的error:{}不是必须的&＃xff0c;不过http://blog.csdn.net/goodshot/article/details/9042771中的图片文档中也有提到&＃xff0c;但是在实际测试时没有也可以通过&＃xff09;&＃xff1a;

{ success: true, errors: {} }

success属性用于指定操作是否成功&＃xff0c;客户端以此来判断执行的success回调还是failure回调。errors是自定义的错误信息对象。可以向里面传递你想要传递给回调函数的信息。例子中&＃xff0c;在errors中定义了一个info属性&＃xff0c;返回到客户端&＃xff0c;则可以通过回调参数&＃xff08;之前的success&＃xff1a;等都是回调函数&＃xff0c;见http://blog.csdn.net/goodshot/article/details/9116973下方红色字体&＃xff09;进行访问。比如。action.result.errors.info进行访问。

二、加载数据

客户端load函数&＃xff0c;用以加载数据&＃xff0c;并将数据加载到各个表单之中。

 1 function load() {
 2     frm.getForm().load({
 3         waitMsg: &＃39;正在加载数据&＃39;,
 4         waitTitle: &＃39;提示&＃39;,
 5         url: &＃39;Handler.ashx&＃39;,
 6         method: &＃39;GET&＃39;,
 7         success: function(form, action) {
 8             Ext.Msg.alert(&＃39;提示&＃39;, &＃39;加载成功&＃39;);
 9         }
10     });
11 }

服务端代码

 1<%&＃64; WebHandler Language&＃61;"C#" Class&＃61;"Handler" %>
 2
 3using System;
 4using System.Web;
 5
 6public class load : IHttpHandler {
 7    
 8    public void ProcessRequest (HttpContext context) {
 9        //string result &＃61; string.Format("{success: {0}, errors:{1}}", "false", "Hello world");
10        context.Response.ContentType &＃61; "text/json";
11        context.Response.Write(&＃64;"
12{
13    success: true,
14    data: { first: &＃39;tom&＃39;, last: &＃39;king&＃39;, company: &＃39;microsoft&＃39;, email: &＃39;czclkg&＃64;21cn.com&＃39;, time: &＃39;10:00am&＃39; }
15}
16");
17        
18    }
19 
20    public bool IsReusable {
21        get {
22            return false;
23        }
24    }
25
26}

注意&＃xff0c;跟数据的提交一样&＃xff0c;对于数据的加载&＃xff0c;服务器端同样也要遵循一定的格式&＃xff1a;

{ success: true, data: {表单id: 表单值} }

success属性作用同上。主要是data。data用以保存表单元素的数据。格式是将表单的id作为属性名称&＃xff0c;表单值作为属性值。返回客户端后&＃xff0c;ext自动分析data属性&＃xff0c;并将各个表单值赋值到各个表单当中。

三、表单的重置

function reset() {
    frm.getForm().reset();
}