EXTJS 表单提交

EXTJS框架中,在提交表单时,可有3种方式:

方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素的值 ,代码如下:

  Ext.onReady(function () {
             var formPanel = new Ext.create({
                 xtype: 'form',
                 id: 'multiColumnForm',
                 collapsible: false,
                 frame: true,
                 title: '用户注册表单',
                 bodyPadding: '5 5 0',
                 width: ,
                 fieldsDefaults: {
                     labelAlign: 'top',
                     msgTarget: 'side'
                 },
                 renderTo: 'regist_div',
                 // 提交表单
                 submit: function(){
                     //连接到服务器的url地址
                     this.getEl().dom.action = 'your server url';
                     this.getEl().dom.method = 'post';
                     this.getEl().dom.submit();
                 },
                 items: [
                     {
                         xtype: 'textfield',
                         id: 'nameText',
                         name: 'nameText',
                         fieldLabel: '用户名',
                         allowBlank: false,
                         tooltip: '请输入注册用户名',
                         afterLabelTextTpl: required,
                         blankText: '请输入注册用户名',
                     },
                     {
                         xtype: 'textfield',
                         id: 'emailText',
                         name: 'emailText',
                         fieldLabel: 'Email',
                         allowBlank: false,
                         afterLabelTextTpl: required,
                         vtype: 'email',
                         tooltip: '请输入您的email 地址',
                         blankText: '请输入您的email 地址',
                     },
                     {
                         xtype: 'datefield',
                         id: 'birthdayText',
                         name: 'birthdayText',
                         fieldLabel: '出生日期',
                         tooltip: '请输入您的出生日期',
                     },
                     {
                         xtype: 'numberfield',
                         id: 'ageText',
                         name: 'ageText',
                         fieldLabel: '年龄',
                         value: ,
                         tooltip: '请输入您的年龄',
                     },
                     {
                         xtype: 'textfield',
                         id: 'phoneText',
                         name: 'phoneText',
                         fieldLabel: '联系电话',
                         maxLength: ,
                         tooltip: '请输入您的电话',
                         allowBlank: false,
                         afterLabelTextTpl: required,
                         blankText: '请输入您的电话',
                     },
                     {
                         xtype: 'button',
                         name: 'registButton',
                         id: 'registButton',
                         text: '保　存',
                         width: ,
                         height: ,
                         handler: function () {
                            //表单验证
                             var isValid = this.up('form').getForm().isValid();
                             if(isValid){
                                formPanel.form.submit();
                               //Ext.get('regist_div').dom.submit();
                            }
                  }
                     },
                     {
                         xtype: 'button',
                         name: 'RegistButton',
                         text: '重 置',
                         width: ,
                         height: ,
                         handler: reset
                     }]
             });

             function reset() {
                 formPanel.form.reset();
             }
         });

方法二: 使用EXTJS框架中的 Ajax 方式来提交,但它不会提交整个表单,而是提交 params 参数中的数据, params 参数是个 json格式, 如果正确提交到了后台,不管后台是否成功执行,在后台返回时,都会执行 success 函数, 如果在提交进没有进入后台,就会执行failure 函数,这样一来,无法确定后台是否成功执行了,所以,在这里,要对方法进行调整,在后台成功执行时返回后,提示成功的消息,相反,如果执行失败,在返回后,提示执行失败的消息,这就要对 success 返回的参数进行判断, 在后台进行构造,如果后台执行成功,将声明一个变量,并赋值为 true, 如果后台执行失败,将返回 false, 在提交后返回提交的结果,具体代码如下:

   Ext.onReady(function () {
             var formPanel = new Ext.create({
                 xtype: 'form',
                 id: 'multiColumnForm',
                 collapsible: false,
                 frame: true,
                 title: '用户注册表单',
                 bodyPadding: '5 5 0',
                 width: ,
                 fieldsDefaults: {
                     labelAlign: 'top',
                     msgTarget: 'side'
                 },
                 renderTo: 'regist_div',
                 items: [
                     {
                         xtype: 'textfield',
                         id: 'nameText',
                         name: 'nameText',
                         fieldLabel: '用户名',
                         allowBlank: false,
                         tooltip: '请输入注册用户名',
                         afterLabelTextTpl: required,
                         blankText: '请输入注册用户名',
                     },
                     {
                         xtype: 'textfield',
                         id: 'emailText',
                         name: 'emailText',
                         fieldLabel: 'Email',
                         allowBlank: false,
                         afterLabelTextTpl: required,
                         vtype: 'email',
                         tooltip: '请输入您的email 地址',
                         blankText: '请输入您的email 地址',
                     },
                     {
                         xtype: 'datefield',
                         id: 'birthdayText',
                         name: 'birthdayText',
                         fieldLabel: '出生日期',
                         tooltip: '请输入您的出生日期',

                     },
                     {
                         xtype: 'numberfield',
                         id: 'ageText',
                         name: 'ageText',
                         fieldLabel: '年龄',
                         value: ,
                         tooltip: '请输入您的年龄',
                     },
                     {
                         xtype: 'textfield',
                         id: 'phoneText',
                         name: 'phoneText',
                         fieldLabel: '联系电话',
                         maxLength: ,
                         tooltip: '请输入您的电话',
                         allowBlank: false,
                         afterLabelTextTpl: required,
                         blankText: '请输入您的电话',
                     },
                     {
                         xtype: 'button',
                         name: 'registButton',
                         id: 'registButton',
                         text: '保　存',
                         width: ,
                         height: ,
                         handler: function () {
                             var isValid=this.up('form').getForm().isValid();
                         console.log(isValid);

                         if(isValid){
                             var name = Ext.getCmp('nameText').getValue();
                             var email = Ext.getCmp('emailText').getValue();
                             var phone = Ext.getCmp('phoneText').getValue();
                             var password = Ext.getCmp('loginPassword').getValue();

                             Ext.Ajax.request({
                                 url: 'your server url',
                                 method: 'post',
                                 params: {
                                     'name': name,
                                     'email': email,
                                     'sex': sex,
                                     'phone': phone,
                                     'pwd': password
                                 },
                                 success: function (response, option) {
                                     var responseArray = Ext.util.JSON.decode(response.responseText);
                                     if (responseArray.success) {
                                         Ext.Msg.alert('提示', '提交成功');
                                     } else {
                                         Ext.Msg.alert('提示', '提交失败：'+　response.responseText);
                                     }
                                 },

                                 failure: function(response,option){
                                     Ext.Msg.alert('警告','数据处理发生错误：'+response.responseText)
                                 }
                             });
                         }
                         }
                     },
                     {
                         xtype: 'button',
                         name: 'RegistButton',
                         text: '重 置',
                         width: ,
                         height: ,
                         handler: reset
                     }]
             });

             function reset() {
                 formPanel.form.reset();
             }
         });

注意:后台返回的 json 格式 极为重要,不然前端不能正确解析   

后台返回的数据格式为:    '{success:true, responseText: errorInfomation, data[{id: 3124}]}