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: .,
                            labelWidth:,
                            name: 'userName'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '工号',
                            columnWidth: .,
                            labelWidth: ,
                            labelAlign: 'right',
                            name: 'workNum'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '部门',
                            labelAlign: 'right',
                            columnWidth: .,
                            labelWidth: ,
                            name: 'department'
                        }
                    ]
                },
                {
                    xtype: 'form',
                    border: false,
                    id: 'formR2',
                    layout: 'column',
                    bodyStyle: 'padding-bottom:10px;',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: '电话号',
                            labelAlign: 'right',
                            columnWidth: .,
                            labelWidth: ,
                            name: 'phone'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '职位',
                            columnWidth: .,
                            labelWidth: ,
                            labelAlign: 'right',
                            name: 'position'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '微信号',
                            labelAlign: 'right',
                            columnWidth: .,
                            labelWidth: ,
                            name: 'WeiXin'
                        }
                    ]
                }, {
                    xtype: 'form',
                    id: 'formR3',
                    border: false,
                    layout: 'column',
                    items: [
                        {
                            xtype: 'combo',
                            fieldLabel: '性别',
                            //width:245,
                            columnWidth: .,
                            labelAlign: 'right',
                            labelWidth: ,
                            editable: false,
                            emptyText: '--请选择--',
                            store: genderStore,
                            queryMode: 'local',
                            displayField: 'Name',
                            valueField: 'Value',
                            name: 'sex'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '通信地址',
                            labelAlign: 'right',
                            columnWidth: .,
                            labelWidth: ,
                            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表单重置

            }
        }]
        });

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#语言开发

  public ActionResult HandlerRoleAdd()
         {
               try
                 {
                    //获取前台传过来的参数
                         string userName = string.Empty;
             if (Request["userName"] != null)
             {
                 userName = Request["userName"].ToString();
             }
             string workNum = string.Empty;
             if (Request["workNum"] != null)
             {
                 workNum = Request["workNum"].ToString();
             }
             string department = string.Empty;
             if (Request["department"] != null)
             {
                 department = Request["department"].ToString();
             }

             string phone = string.Empty;
             if (Request["phone"] != null)
             {
                 phone = Request["phone"].ToString();
             }

             string position = string.Empty;
             if (Request["position"] != null)
             {
                 position = Request["position"].ToString();
             }

             string WeiXin = string.Empty;
             if (Request["WeiXin"] != null)
             {
                 WeiXin = Request["WeiXin"].ToString();
             }

             string sex = string.Empty;
             if (Request["sex"] != null)
             {
                 sex = Request["sex"].ToString();
             }

             string UserAddress = string.Empty;
             if (Request["UserAddress"] != null)
             {
                 UserAddress = Request["UserAddress"].ToString();
             }

                     string str =string.empty;
                      //
                      //具体业务逻辑
                      //

                     if (string.IsNullOrEmpty(str))
                     {
                         result.success = false;
                         result.msg = "失败";
                     }
                     else
                     {
                             result.success = true;
                             result.msg = "成功";

                     }

                 }
                 catch(Exception ex)
                 {

                     result.success = false;
                     result.msg = ex.Message;

                 }
                 finally
                 {

                 }

             return Json(result,JsonRequestBehavior.DenyGet);
         }

4、结束语

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