FormPanel数据提交和加载的方法
1.FormPanel数据提交包括两种方式,一种是使用BasicForm的submit方式进行ajax的异步提交,另一种是使用原始的HTML表单的提交方式
1.1BasicForm的submit方式进行ajax的异步提交
- 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('提示','保存失败!');
- }
- });
- }
- ]
- });