extjs表单FormPanel提交数据和加载数据

在使用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('提示','保存失败！');
				    }
				});
				
			} 
		]
});