Extjs用ajax提交表单四种方式

1. /** 
2.  * <p> 
3.  * 第一种Ajax提交方式 
4.  * </p> 
5.  * <p> 
6.  * 这种方式需要直接使用ext Ajax方法进行提交 
7.  * </p> 
8.  * <p> 
9.  * 使用这种方式，需要将待传递的参数进行封装 
10.  * </p> 
11.  *  
12.  * @return 
13.  */  
14. function saveUser_ajaxSubmit1() {  
15.     Ext.Ajax.request( {  
16.         url : 'user_save.action',  
17.         method : 'post',  
18.         params : {  
19.             userName : document.getElementById('userName').value,  
20.             password : document.getElementById('password').value  
21.         },  
22.         success : function(response, options) {  
23.             var o = Ext.util.JSON.decode(response.responseText);  
24.             alert(o.msg);  
25.         },  
26.         failure : function() {  
27.         }  
28.     });  
29. }  
30. /** 
31.  * <p> 
32.  * 第二种Ajax提交方式 
33.  * </p> 
34.  * <p> 
35.  * 这种方式将为ext的ajax指定一个html表单 
36.  * </p> 
37.  * <p> 
38.  * 使用这种方式，不需要将待传递的参数进行封装 
39.  * </p> 
40.  *  
41.  * @return 
42.  */  
43. function saveUser_ajaxSubmit2() {  
44.     Ext.Ajax.request( {  
45.         url : 'user_save.action',  
46.         method : 'post',  
47.         form : 'userForm', // 指定表单  
48.         success : function(response, options) {  
49.             var o = Ext.util.JSON.decode(response.responseText);  
50.             alert(o.msg);  
51.         },  
52.         failure : function() {  
53.         }  
54.     });  
55. }  
56. /** 
57.  * <p> 
58.  * 第三种Ajax提交方式 
59.  * </p> 
60.  * <p> 
61.  * 这种方式将为ext的自己的表单进行提交 
62.  * </p> 
63.  * <p> 
64.  * 使用这种方式，需要使用ext自己的textField组件 
65.  * </p> 
66.  *  
67.  * @return 
68.  */  
69. function saveUser_ajaxSubmit3() {  
70.     // 定义表单  
71.     var formPanel = new Ext.FormPanel( {  
72.         labelWidth : 75,  
73.         frame : true,  
74.         bodyStyle : 'padding:5px 5px 0',  
75.         width : 350,  
76.         defaults : {  
77.             width : 230  
78.         },  
79.         defaultType : 'textfield',  
80.         items : [ {  
81.             fieldLabel : '用户名',  
82.             name : 'userName',  
83.             allowBlank : false  
84.         }, {  
85.             fieldLabel : '密   码',  
86.             name : 'password'  
87.         } ]  
88.     });  
89.     // 定义窗口  
90.     var win = new Ext.Window( {  
91.         title : '添加用户',  
92.         layout : 'fit',  
93.         width : 500,  
94.         height : 300,  
95.         closeAction : 'close',  
96.         closable : false,  
97.         plain : true,  
98.         items : formPanel,  
99.         buttons : [ {  
100.             text : '确定',  
101.             handler : function() {  
102.                 var form = formPanel.getForm();  
103.                 var userName = form.findField('userName').getValue().trim();  
104.                 var password = form.findField('password').getValue().trim();  
105.                 if (!userName) {  
106.                     alert('用户名不能为空');  
107.                     return;  
108.                 }  
109.                 if (!password) {  
110.                     alert('密码不能为空');  
111.                     return;  
112.                 }  
113.                 form.submit( {  
114.                     waitTitle : '请稍后...',  
115.                     waitMsg : '正在保存用户信息,请稍后...',  
116.                     url : 'user_save.action',  
117.                     method : 'post',  
118.                     success : function(form, action) {  
119.                         alert(action.result.msg);  
120.                     },  
121.                     failure : function(form, action) {  
122.                         alert(action.result.msg);  
123.                     }  
124.                 });  
125.             }  
126.         }, {  
127.             text : '取消',  
128.             handler : function() {  
129.                 win.close();  
130.             }  
131.         } ]  
132.     });  
133.     win.show();  
134. }  
135. /** 
136.  * <p> 
137.  * 第四种Ajax提交方式 
138.  * </p> 
139.  * <p> 
140.  * 这种方式将html的表单转化为ext的表单进行异步提交 
141.  * </p> 
142.  * <p> 
143.  * 使用这种方式，需要定义好html的表单 
144.  * </p> 
145.  *  
146.  * @return 
147.  */  
148. function saveUser_ajaxSubmit4() {  
149.     new Ext.form.BasicForm('userForm').submit( {  
150.         waitTitle : '请稍后...',  
151.         waitMsg : '正在保存用户信息,请稍后...',  
152.         url : 'user_save.action',  
153.         method : 'post',  
154.         success : function(form, action) {  
155.             alert(action.result.msg);  
156.         },  
157.         failure : function(form, action) {  
158.             alert(action.result.msg);  
159.         }  
160.     });  
161. }