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