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 ' ,
10          bodyStyle:  ' padding: 5px ' ,
11          width:  350 ,
12          defauls: { width:  230  },
13          defaultType:  ' textfield ' ,
14          applyTo:  ' con ' ,
15          autoHeight:  true ,
16          items: [
17              {
18                  fieldLabel:  ' First Name ' ,
19                  name:  ' first ' ,
20                  allowBlank:  false
21              }, {
22                  fieldLabel:  ' Last Name ' ,
23                  name:  ' last '
24              }, {
25                  fieldLabel:  ' Company ' ,
26                  name:  ' company '
27              }, {
28                  fieldLabel:  ' Email ' ,
29                  name:  ' email ' ,
30                  vtype:  ' email ' ,
31                  allowBlank:  false
32              }, {
33                  xtype:  ' timefield ' ,
34                  fieldLabel:  ' Time ' ,
35                  name:  ' time ' ,
36                  minValue:  ' 8:00am ' ,
37                  maxValue:  ' 6:00pm ' ,
38                  allowBlank:  true
39              }
40          ],
41          buttons: [
42              { text:  ' Save ' , handler: submit },
43              { text:  ' load ' , handler: load },
44              { text:  ' Reset ' , handler: reset }
45          ]
46      });
47      frm  =  Ext.getCmp( ' frm ' );
48  });
复制代码

 

效果如下:

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

一、提交数据

 

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

 

 服务器端代码:

 

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

18        else
19        {
20            context.Response.Write("{ success: false, errors:{info: '错误了'} }");
21        }

22        
23    }

24 
25    public bool IsReusable {
26        get {
27            return false;
28        }

29    }

30
31}
复制代码

 

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

{ success: true, errors: {} }

success属性用于指定操作是否成功,客户端以此来判断执行的success回调还是failure回调。errors是自定义的错误信息对象。可以向里面传递你想要传递给回调函数的信息。例子中,在errors中定义了一个info属性,返回到客户端,则可以通过回调参数(之前的success:等都是回调函数,见http://blog.csdn.net/goodshot/article/details/9116973下方红色字体)进行访问。比如。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          }
10      });
11  }
复制代码

 

服务端代码

 

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

19 
20    public bool IsReusable {
21        get {
22            return false;
23        }

24    }

25
26}
复制代码

 

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

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

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

三、表单的重置

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

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值