Extjs form 表单的 submit

Posted 学习靠自己

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Extjs form 表单的 submit相关的知识,希望对你有一定的参考价值。

说明:extjs form表单的提交方式是多种多样的,本文只是介绍其中的一种方法,本文介绍的方法可能不是完美的,但是对于一般的应用应该是没有问题的。     本文包括的主要内容有:form面板设计、form字段值的获取、后台处理代码以及返回数据的获取    

1、form表单设计

技术分享图片
 var  panelItem = Ext.create(Ext.form.Panel, {
            border: false,
            id:formMain,        
            layout: form,
            items: [
                  {
                    xtype: form,
                    border: false,
                    layout: column,
                    id:formR1,
                    bodyStyle: padding-bottom:10px;,
                    items: [
                        {
                            xtype: textfield,
                            fieldLabel: 用户名,
                            labelAlign: right,
                            columnWidth: .3,
                            labelWidth:65,
                            name: userName
                        }, {
                            xtype: textfield,
                            fieldLabel: 工号,
                            columnWidth: .3,
                            labelWidth: 65,
                            labelAlign: right,
                            name: workNum
                        }, {
                            xtype: textfield,
                            fieldLabel: 部门,
                            labelAlign: right,
                            columnWidth: .3,
                            labelWidth: 65,
                            name: department
                        }
                    ]
                },
                {
                    xtype: form,
                    border: false,
                    id: formR2,
                    layout: column,
                    bodyStyle: padding-bottom:10px;,
                    items: [
                        {
                            xtype: textfield,
                            fieldLabel: 电话号,
                            labelAlign: right,
                            columnWidth: .3,
                            labelWidth: 65,
                            name: phone
                        }, {
                            xtype: textfield,
                            fieldLabel: 职位,
                            columnWidth: .3,
                            labelWidth: 65,
                            labelAlign: right,
                            name: position
                        }, {
                            xtype: textfield,
                            fieldLabel: 微信号,
                            labelAlign: right,
                            columnWidth: .3,
                            labelWidth: 65,
                            name: WeiXin
                        }
                    ]
                }, {
                    xtype: form,
                    id: formR3,
                    border: false,
                    layout: column,
                    items: [
                        {
                            xtype: combo,
                            fieldLabel: 性别,
                            //width:245,
                            columnWidth: .3,
                            labelAlign: right,
                            labelWidth: 65,
                            editable: false,
                            emptyText: --请选择--,
                            store: genderStore,
                            queryMode: local,
                            displayField: Name,
                            valueField: Value,
                            name: sex
                        }, {
                            xtype: textfield,
                            fieldLabel: 通信地址,
                            labelAlign: right,                        
                            columnWidth: .6,
                            labelWidth: 65,
                            name: UserAddress
                        }
                    ]
                }
            ],
          buttons: 
                  [
                    {
                        text: 保存,
                        formBind: true,//这一句代码就是把button和form表单绑定在一起
                        handler: function (btn) {                                 
                           Ext.getCmp(formMain).getForm().submit({
                                    method: POST,
                                    params: {
                                        //怎么获取form字段的值
                                        userName:  Ext.getCmp(formMain).getForm().findField(userName).getValue();//
                                        workNum = Ext.getCmp(formMain).getForm().findField(workNum).getValue();
                                        department = Ext.getCmp(formMain).getForm().findField(department).getValue();
                                        phone = Ext.getCmp(formMain).getForm().findField(phone).getValue();
                                        position = Ext.getCmp(formMain).getForm().findField(position).getValue();
                                        WeiXin = Ext.getCmp(formMain).getForm().findField(WeiXin).getValue();
                                        sex = Ext.getCmp(formMain).getForm().findField(sex).getValue();
                                        UserAddress = Ext.getCmp(formMain).getForm().findField(UserAddress).getValue();
                                            },
                                    url: Home/HandlerRoleAdd,
                                    waitMsg: 请稍等,正在添加,
                                    success: function (form, action) {                    
                                        if(action.result.success) {
                                          Ext.getCmp(formMain).getForm().reset();//form表单重置
                                            Ext.MessageBox.alert(提示, 添加成功!);
                                          //可以根据返回结果,做进一步的处理
                                        
                                           // btn.ownerCt.close();这一句的作用是,如果把上面定义的form对象作为某个窗体的item,就是关闭该窗体
                                        }
                                        else {
                                            Ext.MessageBox.alert(提示, action.result.msg);
                                        }

                                    },
                                    failure: function (form, action) {
                                        Ext.MessageBox.alert(提示, action.result.msg);
                                    }
                                });
                            
                          
                          
                        }
                    },
           {
            text: 重置,
            handler: function () {
                  Ext.getCmp(formMain).getForm().reset();//form表单重置
             
            }
        }]
        });
View Code

 2、form表单中combox控件所需的store

var genderStore = Ext.create("Ext.data.Store", {
            fields: ["Name", "Value"],
            data: [
                { Name: "男", Value: 1 },
                { Name: "女", Value: 2 }
            ]
        });

3、后台代码及返回值结构等

后台是asp.net mvc c#语言开发

技术分享图片
 1  public ActionResult HandlerRoleAdd()
 2         {
 3               try
 4                 {
 5                    //获取前台传过来的参数
 6                         string userName = string.Empty;
 7             if (Request["userName"] != null)
 8             {
 9                 userName = Request["userName"].ToString();
10             }
11             string workNum = string.Empty;
12             if (Request["workNum"] != null)
13             {
14                 workNum = Request["workNum"].ToString();
15             }
16             string department = string.Empty;
17             if (Request["department"] != null)
18             {
19                 department = Request["department"].ToString();
20             }
21 
22             string phone = string.Empty;
23             if (Request["phone"] != null)
24             {
25                 phone = Request["phone"].ToString();
26             }
27 
28             string position = string.Empty;
29             if (Request["position"] != null)
30             {
31                 position = Request["position"].ToString();
32             }
33 
34             string WeiXin = string.Empty;
35             if (Request["WeiXin"] != null)
36             {
37                 WeiXin = Request["WeiXin"].ToString();
38             }
39 
40             string sex = string.Empty;
41             if (Request["sex"] != null)
42             {
43                 sex = Request["sex"].ToString();
44             }
45 
46 
47             string UserAddress = string.Empty;
48             if (Request["UserAddress"] != null)
49             {
50                 UserAddress = Request["UserAddress"].ToString();
51             }
52 
53 
54                     string str =string.empty;
55                      //
56                      //具体业务逻辑
57                      //
58 
59                     if (string.IsNullOrEmpty(str))
60                     {
61                         result.success = false;
62                         result.msg = "失败";
63                     }
64                     else
65                     {
66                             result.success = true;
67                             result.msg = "成功";
68                                          
69                     }
70                
71                 }
72                 catch(Exception ex)
73                 {
74                  
75                     result.success = false;
76                     result.msg = ex.Message;
77 
78                 }
79                 finally
80                 {
81                 
82                 }
83             
84             return Json(result,JsonRequestBehavior.DenyGet);
85         }
View Code

4、结束语

我写的语言可能不优美,示例方法也可能不是很完美,但是我保证是完整的。最后希望这篇博文能够帮助你!







以上是关于Extjs form 表单的 submit的主要内容,如果未能解决你的问题,请参考以下文章

使用 form.submit() 时出错

Extjs4 表单提交传递JSON格式到后台

Extjs的form跨域提交文件时,无法获取返回结果

ExtJS+django表单提交成功/失败问题

保存表单(EXTJS 中的代码)

form表单submit提交内容,跟ajax异步提交form表单的区别,