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}]}