打赏

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、结束语

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

posted @ 2017-12-08 10:50  学习靠自己  阅读(4056)  评论(0)  编辑  收藏  举报