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

 FormPanel数据提交和加载的方法

1.FormPanel数据提交包括两种方式，一种是使用BasicForm的submit方式进行ajax的异步提交，另一种是使用原始的HTML表单的提交方式

    1.1BasicForm的submit方式进行ajax的异步提交

[html]  view plain copy

1. var form = new Ext.form.FormPanel({  
2.         frame : true ,  
3.         defaultType : 'textfield' ,  
4.         buttonAlign : 'center' ,  
5.         labelAlign : 'right' ,  
6.             //此处添加url，在getForm().sumit方法就不需要添加url地址了  
7.         url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',   
8.         baseParams : {create : true },  
9.         labelWidth : 70 ,  
10.         items : [  
11.             {  
12.                 fieldLabel : 'id' ,  
13.                 xtype : 'hidden',  
14.                 name : 'formSortUuid'  
15.             },  
16.             {  
17.                 fieldLabel : '名称' ,  
18.                 name : 'sortName'  
19.             },{  
20.                 fieldLabel : '描述' ,  
21.                 xtype : 'textarea' ,  
22.                 name : 'description'  
23.             }  
24.         ] ,  
25.         buttons : [  
26.             {  
27.                 text : '确定' ,  
28.                 handler : function(){  
29.                     //FormPanel自身带异步提交方式  
30.                     form.getForm().submit({  
31.                     //url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',  
32.                     waitTitle : '请等待' ,  
33.                     waitMsg: '正在提交中',  
34.                     success:function(form,action){  
35.                                        //url后台返回的数据{success:true,msg:'成功'}                                                                      Ext.Msg.alert('提示','保存'+action.result.msg);  
36.                     },  
37.                     failure:function(form,action){  
38.                     Ext.Msg.alert('提示','保存失败！');  
39.                     }  
40.                    });  
41.                  }                
42.             }   
43.         ]  
44. });  

1.2原始的HTML表单的提交方式

采用原始的提交方式需要覆盖掉BasicForm的onSubmit和submit方法，完了直接调用submit即可

代码如下：

[html]  view plain copy

1. var form = new Ext.form.FormPanel({  
2.         frame : true ,  
3.         defaultType : 'textfield' ,  
4.         buttonAlign : 'center' ,  
5.         labelAlign : 'right' ,  
6.         baseParams : {create : true },  
7.         //覆盖BasicForm的onSubmit方法  
8.         onSubmit: Ext.emptyFn,  
9.         //覆盖BasicForm的submit方法  
10.         submit: function() {  
11.             form.getForm().getEl().dom.action = '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort' ;  
12.             form.getForm().getEl().dom.submit();  
13.         },  
14.         labelWidth : 70 ,  
15.         items : [  
16.             {  
17.                 fieldLabel : 'id' ,  
18.                 xtype : 'hidden',  
19.                 name : 'formSortUuid'  
20.             },  
21.             {  
22.                 fieldLabel : '名称' ,  
23.                 name : 'sortName'  
24.             },{  
25.                 fieldLabel : '描述' ,  
26.                 xtype : 'textarea' ,  
27.                 name : 'description'  
28.             }  
29.         ] ,  
30.         buttons : [  
31.             {  
32.                 text : '确定' ,  
33.                 handler : function(){  
34.                  /*采用传统的HTML的同步提交*/  
35.                      form.getForm().submit();  
36.                 }  
37.                   
38.             }   
39.         ]  
40. });  

说明：在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方法，要求数据返回方式必须满足以下格式 

[html]  view plain copy

1. {  
2.         success: true,  
3.         data: {  
4.         formSortUuid: "Fred. Olsen Lines",  
5.         namename: "FXT",  
6.         description: "OSL"  
7.         }  
8.  }  

完整代码

[html]  view plain copy

1. var form = new Ext.form.FormPanel({  
2.         frame : true ,  
3.         defaultType : 'textfield' ,  
4.         buttonAlign : 'center' ,  
5.         labelAlign : 'right' ,  
6.         baseParams : {create : true },  
7.         labelWidth : 70 ,  
8.         items : [  
9.             {  
10.                 fieldLabel : 'id' ,  
11.                 xtype : 'hidden',  
12.                 name : 'formSortUuid'  
13.             },  
14.             {  
15.                 fieldLabel : '名称' ,  
16.                 name : 'sortName'  
17.             },{  
18.                 fieldLabel : '描述' ,  
19.                 xtype : 'textarea' ,  
20.                 name : 'description'  
21.             }  
22.         ] ,  
23.         buttons : [  
24.             {  
25.                 text : '加载' ,  
26.                 handler : function(){  
27.                 /*  
28.                 {  
29.                         success: true,  
30.                         data: {  
31.                         formSortUuid: "Fred. Olsen Lines",  
32.                         namename: "FXT",  
33.                         description: "OSL"  
34.                         }  
35.                  }  
36.                 */  
37.                 form.getForm().load({  
38.                     url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',  
39.                     waitTitle : '请等待' ,  
40.                     waitMsg: '正在加载中',  
41.                     success:function(form,action){  
42.                                 alert(action.result.data)                                     
43.                       
44.                     },  
45.                     failure:function(form,action){  
46.                     Ext.Msg.alert('提示','保存失败！');  
47.                     }  
48.                 });  
49.                   
50.             }   
51.         ]  
52. });