EXT提交服务器的三种方式

 

1. EXT提交服务器的三种方式
1, EXT的form表单ajax提交（默认提交方式）

相对单独的ajax提交来说优点在于能省略写参数数组

将按钮添加单击事件，执行以下方法


java 代码

Java代码

1.   1 .  function login(item) {      
2.   2 .                
3.   3 .              if  (validatorForm()) {      
4.   4 .                  // 登录时将登录按钮设为disabled，防止重复提交      
5.   5 .                  this .disabled =  true ;      
6.   6 .      
7.   7 .                  // 第一个参数可以为submit和load      
8.   8 .                 formPanl.form.doAction( 'submit' , {      
9.   9 .      
10. 10 .                     url :  'user.do?method=login' ,      
11. 11 .      
12. 12 .                     method :  'post' ,      
13. 13 .      
14. 14 .                      // 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略      
15. 15 .                         params :  '' ,      
16. 16 .      
17. 17 .                          // 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据      
18. 18 .                         success : function(form, action) {      
19. 19 .      
20. 20 .                             Ext.Msg.alert( '操作' , action.result.data);      
21. 21 .                              this .disabled =  false ;      
22. 22 .      
23. 23 .                         },      
24. 24 .                         failure : function(form, action) {      
25. 25 .      
26. 26 .                             Ext.Msg.alert( '警告' ,  '用户名或密码错误！' );      
27. 27 .                              // 登录失败，将提交按钮重新设为可操作      
28. 28 .                              this .disabled =  false ;      
29. 29 .      
30. 30 .                         }      
31. 31 .                     });      
32. 32 .                  this .disabled =  false ;      
33. 33 .             }      
34. 34 .         }     

   1.  function login(item) {      2.                3.             if (validatorForm()) {      4.                 // 登录时将登录按钮设为disabled，防止重复提交      5.                 this.disabled = true;      6.      7.                 // 第一个参数可以为submit和load      8.                 formPanl.form.doAction('submit', {      9.     10.                     url : 'user.do?method=login',     11.     12.                     method : 'post',     13.     14.                     // 如果有表单以外的其它参数，可以加在这里。我这里暂时为空，也可以将下面这句省略     15.                         params : '',     16.     17.                         // 第一个参数是传入该表单，第二个是Ext.form.Action对象用来取得服务器端传过来的json数据     18.                         success : function(form, action) {     19.     20.                             Ext.Msg.alert('操作', action.result.data);     21.                             this.disabled = false;     22.     23.                         },     24.                         failure : function(form, action) {     25.     26.                             Ext.Msg.alert('警告', '用户名或密码错误！');     27.                             // 登录失败，将提交按钮重新设为可操作     28.                             this.disabled = false;     29.     30.                         }     31.                     });     32.                 this.disabled = false;     33.             }     34.         }   

2.EXT表单的非ajax提交


在表单需加入下列代码


代码

Java代码

1. 1 .  //实现非AJAX提交表单一定要加下面的两行！ onSubmit : Ext.emptyFn, submit : function() {       
2. 2 .  //再次设定action的地址       
3. 3 .  this .getEl().dom.action = 'user.do?method=login' ;  this .getEl().dom.method =  'post' ;       
4. 4 .  //提交submit      
5. 5 .   this .getEl().dom.submit();      
6. 6 . },     

   1. //实现非AJAX提交表单一定要加下面的两行！ onSubmit : Ext.emptyFn, submit : function() {       2. //再次设定action的地址       3. this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';       4. //提交submit      5.  this.getEl().dom.submit();      6. },   

3.EXT的ajax提交


代码

Java代码

1.   1 .      
2.   2 .      
3.   3 . Ext.Ajax.request({      
4.   4 .                                          //请求地址      
5.   5 .                      url:  'login.do' ,      
6.   6 .                       //提交参数组      
7.   7 .                      params: {      
8.   8 .                          LoginName:Ext.get( 'LoginName' ).dom.value,      
9.   9 .                          LoginPassword:Ext.get( 'LoginPassword' ).dom.value      
10. 10 .                      },      
11. 11 .                       //成功时回调      
12. 12 .                      success: function(response, options) {      
13. 13 .                          //获取响应的json字符串      
14. 14 .                        var responseArray = Ext.util.JSON.decode(response.responseText);                                                   
15. 15 .                              if (responseArray.success== true ){      
16. 16 .                                 Ext.Msg.alert( '恭喜' , '您已成功登录！' );          
17. 17 .                             }      
18. 18 .                              else {      
19. 19 .                                 Ext.Msg.alert( '失败' , '登录失败，请重新登录' );          
20. 20 .                             }      
21. 21 .                     }      
22. 22 .             });    

   1.      2.      3. Ext.Ajax.request({      4.                                         //请求地址      5.                      url: 'login.do',      6.                      //提交参数组      7.                      params: {      8.                          LoginName:Ext.get('LoginName').dom.value,      9.                          LoginPassword:Ext.get('LoginPassword').dom.value     10.                      },     11.                      //成功时回调     12.                      success: function(response, options) {     13.                         //获取响应的json字符串     14.                        var responseArray = Ext.util.JSON.decode(response.responseText);                                                  15.                             if(responseArray.success==true){     16.                                 Ext.Msg.alert('恭喜','您已成功登录！');         17.                             }     18.                             else{     19.                                 Ext.Msg.alert('失败','登录失败，请重新登录');         20.                             }     21.                     }     22.             });  

2. 利用viewport布局左边区域系统菜单跳转两种方式


1，使用Ext.get('centerPanel').load(url:"aaa.jsp");url为必选参数还有其他可选参数 请参见api文档。缺点，加入的页面js无效
2，使用iframe，具体
js 代码
Ext.get('centerPanel').dom.innerHTML='< i f r a m e src=aaa.jsp>< / i f r a m e >';
优 点可以在载入的页面动态加载js脚本（推荐使用）

本人是初学，难免有错误或者不妥的地方，请大家 帮忙指出。

Tags: Ext   服务器   JS   ExtJS   

原创文章如转载，请注明：转载自：飞扬部落编程仓库 : http://www.busfly.cn/csdn/

本文链接地址：http://www.busfly.cn/csdn/post/653.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~