extJs常用的四种Ajax异步提交 - haiq - 博客园 

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









posted @ 2015-06-01 12:42  Tim&Blog  阅读(268)  评论(0)  编辑  收藏  举报