ExtJS表单提交与加载全攻略

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

先来看布局代码

 1 var frm
 2 Ext.onReady(function() {
 3     Ext.QuickTips.init();
 4     Ext.form.Field.prototype.msgTarget = 'under';
 5     new Ext.FormPanel({
 6         labelWidth: 75,
 7         id: 'frm',
 8         frame: true,
 9         title: 'simple form',
         bodyStyle: 'padding: 5px',
         width: 350,
         defauls: { width: 230 },
         defaultType: 'textfield',
         applyTo: 'con',
         autoHeight: true,
         items: [
             {
                 fieldLabel: 'First Name',
                 name: 'first',
                 allowBlank: false
             }, {
                 fieldLabel: 'Last Name',
                 name: 'last'
             }, {
                 fieldLabel: 'Company',
                 name: 'company'
             }, {
                 fieldLabel: 'Email',
                 name: 'email',
                 vtype: 'email',
                 allowBlank: false
             }, {
                 xtype: 'timefield',
                 fieldLabel: 'Time',
                 name: 'time',
                 minValue: '8:00am',
                 maxValue: '6:00pm',
                 allowBlank: true
             }
         ],
         buttons: [
             { text: 'Save', handler: submit },
             { text: 'load', handler: load },
             { text: 'Reset', handler: reset }
         ]
     });
     frm = Ext.getCmp('frm');
 });

 

效果如下：

变量frm是全局变量，用以保存对formPanel的引用。

一、提交数据

 

 1 function submit() {
 2     if (!frm.getForm().isValid()) return;
 3     frm.getForm().submit({
 4         waitMsg: '正在提交数据',
 5         waitTitle: '提示',
 6         url: 'submit.ashx',
 7         method: 'GET',
 8         success: function(form, action) {
 9             Ext.Msg.alert('提示', '保存成功');
         },
         failure: function(form, action) {
             Ext.Msg.alert('提示', '原因如下：' + action.result.errors.info);
         }
     });
 }

 

 服务器端代码：

 

 1<%@ WebHandler Language="C#" Class="submit" %>
 2
 3using System;
 4using System.Web;
 5
 6public class submit : IHttpHandler {
 7    
 8    public void ProcessRequest (HttpContext context) {
 9        context.Response.ContentType = "text/json";
        bool result = false;
        // 简单的业务逻辑省略。可以从context.Request["表单的ID"]来读取从formPanel传递过来的表单值。
        // 再根据这些值。做一系列的业务逻辑处理。
        // 以下是提交成功与否，所做出的反馈。
        if (result)
        {
            context.Response.Write("{ success: true, errors:{} }");
        }
        else
        {
            context.Response.Write("{ success: false, errors:{info: '错误了'} }");
        }
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

注意，无论成功与否，服务器端返回的JSON代码，一定要符合如下格式：

{ success: true, errors: {} }

success属性用于指定操作是否成功，客户端以此来判断执行的success回调还是failure回调。errors是自定义的错误信息对象。可以向里面传递你想要传递给回调函数的信息。例子中，在errors中定义了一个info属性，返回到客户端，则可以通过回调参数进行访问。比如。action.result.errors.info进行访问。

二、加载数据

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

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

 

服务端代码

 

 1<%@ WebHandler Language="C#" Class="Handler" %>
 2
 3using System;
 4using System.Web;
 5
 6public class load : IHttpHandler {
 7    
 8    public void ProcessRequest (HttpContext context) {
 9        //string result = string.Format("{success: {0}, errors:{1}}", "false", "Hello world");
        context.Response.ContentType = "text/json";
        context.Response.Write(@"
{
    success: true,
    data: { first: 'tom', last: 'king', company: 'microsoft', email: 'czclkg@21cn.com', time: '10:00am' }
}
");
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

 

注意，跟数据的提交一样，对于数据的加载，服务器端同样也要遵循一定的格式：

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

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

三、表单的重置

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