在使用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('提示','保存失败!');
}
});
}
]
});
分享到:
相关推荐
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
ExtJs中表单formPanel的横向布局
Extjs4 表单从数据库读取数据映射到对应的字段中显示
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
extjs 表单提交 需 要 注 意 的 事 项
FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 Ext.form.BasicForm中的doAction方法来操作的。doAction方法带有两个参数,...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
介绍了两种Extjs formpanel加载数据的方式,有需要的朋友可以参考一下
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
extjs最简单的数据绑定和修改,高手就别浪费资源分了,省的拍砖
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
ExtJS改变默认字体大小的几种方式 1、 只需把ext-all.css样式文件中的所有11px换成12px,这样就为统一的12px的字体了。 但是如果再想增大,那么这时候不光是把源文件的11px换成15px,而且需要把里面和font有关的12px...
该文件中包含了一些实例:如何加载数据到extjs
使用ExtJs获取后台json格式的数据必须的七个jar包,commons-beanuti-1s-1.7.0.jar,commons-collections-3.1.jar,commons-lang-2.5.jar,commons-logging-1.0.4.jar,ezmorph-1.0.4.jar,json-lib-2.1.jar,...
上一篇简单做了一个用ext写的登陆界面,今天来实现登陆效果,主要是回顾下ext中表单提交方法的使用。
ssh+extjs4.0grid删除数据实例,包没有了大家把包下载下来! 我的资源中有extjs的依赖包!
ExtJs表单设计器是一个纯web在线设计器。通过左边的控件树进行拖拉节点到设计区进行设计和布局。设计区是通过html进行展示,尽可能的达到所见即所得的效果。预览区是通过设计区的html进行解析拼装ext的json配置,...
extjs formpanel学习,秘诀,笔记