EXTJS框架中,在提交表单时,可有3种方式:
方法一: 普通的 Form 提交方式, 主要使用 form.submit() 方法来将表单提交到后台,在后台是根据表单的 name 属性来获取表单中元素的值 ,代码如下:
1 Ext.onReady(function () { 2 var formPanel = new Ext.create({ 3 xtype: 'form', 4 id: 'multiColumnForm', 5 collapsible: false, 6 frame: true, 7 title: '用户注册表单', 8 bodyPadding: '5 5 0', 9 600, 10 fieldsDefaults: { 11 labelAlign: 'top', 12 msgTarget: 'side' 13 }, 14 renderTo: 'regist_div', 15 // 提交表单 16 submit: function(){ 17 //连接到服务器的url地址 18 this.getEl().dom.action = 'your server url'; 19 this.getEl().dom.method = 'post'; 20 this.getEl().dom.submit(); 21 }, 22 items: [ 23 { 24 xtype: 'textfield', 25 id: 'nameText', 26 name: 'nameText', 27 fieldLabel: '用户名', 28 allowBlank: false, 29 tooltip: '请输入注册用户名', 30 afterLabelTextTpl: required, 31 blankText: '请输入注册用户名', 32 }, 33 { 34 xtype: 'textfield', 35 id: 'emailText', 36 name: 'emailText', 37 fieldLabel: 'Email', 38 allowBlank: false, 39 afterLabelTextTpl: required, 40 vtype: 'email', 41 tooltip: '请输入您的email 地址', 42 blankText: '请输入您的email 地址', 43 }, 44 { 45 xtype: 'datefield', 46 id: 'birthdayText', 47 name: 'birthdayText', 48 fieldLabel: '出生日期', 49 tooltip: '请输入您的出生日期', 51 }, 52 { 53 xtype: 'numberfield', 54 id: 'ageText', 55 name: 'ageText', 56 fieldLabel: '年龄', 57 value: 20, 58 tooltip: '请输入您的年龄', 59 }, 60 { 61 xtype: 'textfield', 62 id: 'phoneText', 63 name: 'phoneText', 64 fieldLabel: '联系电话', 65 maxLength: 11, 66 tooltip: '请输入您的电话', 67 allowBlank: false, 68 afterLabelTextTpl: required, 69 blankText: '请输入您的电话', 70 }, 71 { 72 xtype: 'button', 73 name: 'registButton', 74 id: 'registButton', 75 text: '保 存', 76 90, 77 height: 30, 78 handler: function () { 79 //表单验证 80 var isValid = this.up('form').getForm().isValid(); 81 if(isValid){ 82 formPanel.form.submit(); 83 //Ext.get('regist_div').dom.submit(); 84 } 85 } 86 }, 87 { 88 xtype: 'button', 89 name: 'RegistButton', 90 text: '重 置', 91 90, 92 height: 30, 93 handler: reset 94 }] 95 }); 96 97 function reset() { 98 formPanel.form.reset(); 99 } 100 });
方法二: 使用EXTJS框架中的 Ajax 方式来提交,但它不会提交整个表单,而是提交 params 参数中的数据, params 参数是个 json格式, 如果正确提交到了后台,不管后台是否成功执行,在后台返回时,都会执行 success 函数, 如果在提交进没有进入后台,就会执行failure 函数,这样一来,无法确定后台是否成功执行了,所以,在这里,要对方法进行调整,在后台成功执行时返回后,提示成功的消息,相反,如果执行失败,在返回后,提示执行失败的消息,这就要对 success 返回的参数进行判断, 在后台进行构造,如果后台执行成功,将声明一个变量,并赋值为 true, 如果后台执行失败,将返回 false, 在提交后返回提交的结果,具体代码如下:
1 Ext.onReady(function () { 2 var formPanel = new Ext.create({ 3 xtype: 'form', 4 id: 'multiColumnForm', 5 collapsible: false, 6 frame: true, 7 title: '用户注册表单', 8 bodyPadding: '5 5 0', 9 600, 10 fieldsDefaults: { 11 labelAlign: 'top', 12 msgTarget: 'side' 13 }, 14 renderTo: 'regist_div', 15 items: [ 16 { 17 xtype: 'textfield', 18 id: 'nameText', 19 name: 'nameText', 20 fieldLabel: '用户名', 21 allowBlank: false, 22 tooltip: '请输入注册用户名', 23 afterLabelTextTpl: required, 24 blankText: '请输入注册用户名', 25 }, 26 { 27 xtype: 'textfield', 28 id: 'emailText', 29 name: 'emailText', 30 fieldLabel: 'Email', 31 allowBlank: false, 32 afterLabelTextTpl: required, 33 vtype: 'email', 34 tooltip: '请输入您的email 地址', 35 blankText: '请输入您的email 地址', 36 }, 37 { 38 xtype: 'datefield', 39 id: 'birthdayText', 40 name: 'birthdayText', 41 fieldLabel: '出生日期', 42 tooltip: '请输入您的出生日期', 43 44 }, 45 { 46 xtype: 'numberfield', 47 id: 'ageText', 48 name: 'ageText', 49 fieldLabel: '年龄', 50 value: 20, 51 tooltip: '请输入您的年龄', 52 }, 53 { 54 xtype: 'textfield', 55 id: 'phoneText', 56 name: 'phoneText', 57 fieldLabel: '联系电话', 58 maxLength: 11, 59 tooltip: '请输入您的电话', 60 allowBlank: false, 61 afterLabelTextTpl: required, 62 blankText: '请输入您的电话', 63 }, 64 { 65 xtype: 'button', 66 name: 'registButton', 67 id: 'registButton', 68 text: '保 存', 69 90, 70 height: 30, 71 handler: function () { 72 var isValid=this.up('form').getForm().isValid(); 73 console.log(isValid); 74 75 if(isValid){ 76 var name = Ext.getCmp('nameText').getValue(); 77 var email = Ext.getCmp('emailText').getValue(); 78 var phone = Ext.getCmp('phoneText').getValue(); 79 var password = Ext.getCmp('loginPassword').getValue(); 80 81 Ext.Ajax.request({ 82 url: 'your server url', 83 method: 'post', 84 params: { 85 'name': name, 86 'email': email, 87 'sex': sex, 88 'phone': phone, 89 'pwd': password 90 }, 91 success: function (response, option) { 92 var responseArray = Ext.util.JSON.decode(response.responseText); 93 if (responseArray.success) { 94 Ext.Msg.alert('提示', '提交成功'); 95 } else { 96 Ext.Msg.alert('提示', '提交失败：'+ response.responseText); 97 } 98 }, 99 100 failure: function(response,option){ 101 Ext.Msg.alert('警告','数据处理发生错误：'+response.responseText) 102 } 103 }); 104 } 105 } 106 }, 107 { 108 xtype: 'button', 109 name: 'RegistButton', 110 text: '重 置', 111 90, 112 height: 30, 113 handler: reset 114 }] 115 }); 116 117 function reset() { 118 formPanel.form.reset(); 119 } 120 });
注意:后台返回的 json 格式 极为重要,不然前端不能正确解析
后台返回的数据格式为: '{success:true, responseText: errorInfomation, data[{id: 3124}]}