Extjs用ajax提交表单四种方式

前端之家收集整理的这篇文章主要介绍了Extjs用ajax提交表单四种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. /**
  2. *<p>
  3. *第一种Ajax提交方式
  4. @H_502_19@ *</p>
  5. *<p>
  6. @H_502_19@ *这种方式需要直接使用extAjax方法进行提交
  7. *</p>
  8. *使用这种方式,需要将待传递的参数进行封装
  9. *
  10. @H_502_19@ *@return
  11. */
  12. @H_502_19@ functionsaveUser_ajaxSubmit1(){
  13. Ext.Ajax.request({
  14. @H_502_19@ url:'user_save.action',
  15. method:'post',
  16. @H_502_19@ params:{
  17. userName:document.getElementById('userName').value,248)"> password:document.getElementById('password').value
  18. },
  19. @H_502_19@ success:function(response,options){
  20. varo=Ext.util.JSON.decode(response.responseText);
  21. @H_502_19@ alert(o.msg);
  22. failure:function(){
  23. }
  24. @H_502_19@ });
  25. /**
  26. *第二种Ajax提交方式
  27. *这种方式将为ext的ajax指定一个html表单
  28. @H_502_19@ *使用这种方式,不需要将待传递的参数进行封装
  29. *
  30. *@return
  31. @H_502_19@ */
  32. functionsaveUser_ajaxSubmit2(){
  33. @H_502_19@ Ext.Ajax.request({
  34. url:'user_save.action',248)"> method:'post',108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> form:'userForm',//指定表单
  35. @H_502_19@ *第三种Ajax提交方式
  36. *这种方式将为ext的自己的表单进行提交
  37. @H_502_19@ *使用这种方式,需要使用ext自己的textField组件
  38. functionsaveUser_ajaxSubmit3(){
  39. @H_502_19@ //定义表单
  40. varformPanel=newExt.FormPanel({
  41. @H_502_19@ labelWidth:75,108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> frame:true,248)"> bodyStyle:'padding:5px5px0',108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> width:350,248)"> defaults:{
  42. 230
  43. @H_502_19@ },
  44. defaultType:'textfield',248)"> items:[{
  45. fieldLabel:'用户名',248)"> name:'userName',108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> allowBlank:false
  46. fieldLabel:'密码',248)"> name:'password'
  47. }]
  48. //定义窗口
  49. @H_502_19@ varwin=newExt.Window({
  50. title:'添加用户',248)"> layout:'fit',0); margin:0px; padding:0px; border:none; background-color:inherit">500,248)"> height:300,108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> closeAction:'close',248)"> closable:false,108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> plain:true,248)"> items:formPanel,108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> buttons:[{
  51. @H_502_19@ text:'确定',108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> handler:function(){ @H_502_19@ varform=formPanel.getForm();
  52. varuserName=form.findField('userName').getValue().trim();
  53. @H_502_19@ varpassword=form.findField('password').getValue().trim();
  54. if(!userName){
  55. @H_502_19@ alert('用户名不能为空');
  56. return;
  57. @H_502_19@ }
  58. if(!password){
  59. @H_502_19@ alert('密码不能为空');
  60. form.submit({
  61. @H_502_19@ waitTitle:'请稍后...',108); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> waitMsg:'正在保存用户信息,请稍后...',248)"> success:function(form,action){
  62. alert(action.result.msg);
  63. failure:function(form,action){
  64. @H_502_19@ alert(action.result.msg);
  65. text:'取消',248)"> handler:function(){
  66. win.close();
  67. win.show();
  68. *第四种Ajax提交方式
  69. @H_502_19@ *这种方式将html的表单转化为ext的表单进行异步提交
  70. *使用这种方式,需要定义好html的表单
  71. @H_502_19@ functionsaveUser_ajaxSubmit4(){
  72. newExt.form.BasicForm('userForm').submit({
  73. }

猜你在找的Ajax相关文章