转自:[url]http://liuna718-163-com.iteye.com/blog/805522[/url]
在使用Extjs中,除了GridPanel以为,使用最多的应该用的是FormPanel了,在使用FormPanel肯定少不了,数据的提交和加载,现在本人总结下FormPanel数据提交和加载的方法
1.FormPanel数据提交包括两种方式,一种是使用BasicForm的submit方式进行ajax的异步提交,另一种是使用原始的HTML表单的提交方式
1.1BasicForm的submit方式进行ajax的异步提交
完整代码如下:
1.2原始的HTML表单的提交方式
采用原始的提交方式需要覆盖掉BasicForm的onSubmit和submit方法,完了直接调用submit即可
代码如下:
说明:在BasicForm中有一个standardSubmit : Boolean
如果此项设置为true,将使用标准的HTML表单提交代替XHR(Ajax)方式的提交。 (默认值为 false)
在FormPanel把standardSubmit设置为true,就可以用同步提交的方式,但因为extjs2.0版本中sumit源码里边没有指定原始form表单的action属性,所以没有办法提交,但在3.0版本已经添加了,可以直接指定standardSubmit为true即可进行同步提交
2.FormPanel数据加载采用1BasicForm的load方法
1BasicForm的load方法,要求数据返回方式必须满足以下格式
完整代码如下:
在使用Extjs中,除了GridPanel以为,使用最多的应该用的是FormPanel了,在使用FormPanel肯定少不了,数据的提交和加载,现在本人总结下FormPanel数据提交和加载的方法
1.FormPanel数据提交包括两种方式,一种是使用BasicForm的submit方式进行ajax的异步提交,另一种是使用原始的HTML表单的提交方式
1.1BasicForm的submit方式进行ajax的异步提交
form.getForm().submit({
url: '<%=request.getContextPath()%>/formsort.do?method=test',
waitTitle : '请等待' ,
waitMsg: '正在提交中',
success:function(form,action){
//url后台返回的数据{success:true,msg:'成功'}
Ext.Msg.alert('提示','保存'+action.result.msg);
},
failure:function(form,action){
Ext.Msg.alert('提示','保存失败!');
}
});
完整代码如下:
var form = new Ext.form.FormPanel({
frame : true ,
defaultType : 'textfield' ,
buttonAlign : 'center' ,
labelAlign : 'right' ,
//此处添加url,那么在getForm().sumit方法不需要在添加了url地址了
url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',
baseParams : {create : true },
labelWidth : 70 ,
items : [
{
fieldLabel : 'id' ,
xtype : 'hidden',
name : 'formSortUuid'
},
{
fieldLabel : '名称' ,
name : 'sortName'
},{
fieldLabel : '描述' ,
xtype : 'textarea' ,
name : 'description'
}
] ,
buttons : [
{
text : '确定' ,
handler : function(){
//FormPanel自身带异步提交方式
form.getForm().submit({
//url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',
waitTitle : '请等待' ,
waitMsg: '正在提交中',
success:function(form,action){
//url后台返回的数据{success:true,msg:'成功'}
Ext.Msg.alert('提示','保存'+action.result.msg);
},
failure:function(form,action){
Ext.Msg.alert('提示','保存失败!');
}
});
}
}
]
});
1.2原始的HTML表单的提交方式
采用原始的提交方式需要覆盖掉BasicForm的onSubmit和submit方法,完了直接调用submit即可
代码如下:
var form = new Ext.form.FormPanel({
frame : true ,
defaultType : 'textfield' ,
buttonAlign : 'center' ,
labelAlign : 'right' ,
baseParams : {create : true },
//覆盖BasicForm的onSubmit方法
onSubmit: Ext.emptyFn,
//覆盖BasicForm的submit方法
submit: function() {
form.getForm().getEl().dom.action = '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort' ;
form.getForm().getEl().dom.submit();
},
labelWidth : 70 ,
items : [
{
fieldLabel : 'id' ,
xtype : 'hidden',
name : 'formSortUuid'
},
{
fieldLabel : '名称' ,
name : 'sortName'
},{
fieldLabel : '描述' ,
xtype : 'textarea' ,
name : 'description'
}
] ,
buttons : [
{
text : '确定' ,
handler : function(){
/*采用传统的HTML的同步提交*/
form.getForm().submit();
}
}
]
});
说明:在BasicForm中有一个standardSubmit : Boolean
如果此项设置为true,将使用标准的HTML表单提交代替XHR(Ajax)方式的提交。 (默认值为 false)
在FormPanel把standardSubmit设置为true,就可以用同步提交的方式,但因为extjs2.0版本中sumit源码里边没有指定原始form表单的action属性,所以没有办法提交,但在3.0版本已经添加了,可以直接指定standardSubmit为true即可进行同步提交
2.FormPanel数据加载采用1BasicForm的load方法
1BasicForm的load方法,要求数据返回方式必须满足以下格式
{
success: true,
data: {
formSortUuid: "Fred. Olsen Lines",
namename: "FXT",
description: "OSL"
}
}
完整代码如下:
var form = new Ext.form.FormPanel({
frame : true ,
defaultType : 'textfield' ,
buttonAlign : 'center' ,
labelAlign : 'right' ,
baseParams : {create : true },
labelWidth : 70 ,
items : [
{
fieldLabel : 'id' ,
xtype : 'hidden',
name : 'formSortUuid'
},
{
fieldLabel : '名称' ,
name : 'sortName'
},{
fieldLabel : '描述' ,
xtype : 'textarea' ,
name : 'description'
}
] ,
buttons : [
{
text : '加载' ,
handler : function(){
/*
{
success: true,
data: {
formSortUuid: "Fred. Olsen Lines",
namename: "FXT",
description: "OSL"
}
}
*/
form.getForm().load({
url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',
waitTitle : '请等待' ,
waitMsg: '正在加载中',
success:function(form,action){
alert(action.result.data)
},
failure:function(form,action){
Ext.Msg.alert('提示','保存失败!');
}
});
}
]
});