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

shubangjun

转自：http://liuna718-163-com.iteye.com/blog/805522
在使用Extjs中，除了GridPanel以为，使用最多的应该用的是FormPanel了，在使用FormPanel肯定少不了，数据的提交和加载，现在本人总结下FormPanel数据提交和加载的方法
1.FormPanel数据提交包括两种方式，一种是使用BasicForm的submit方式进行ajax的异步提交，另一种是使用原始的HTML表单的提交方式
1.1BasicForm的submit方式进行ajax的异步提交
form.getForm().submit({      url: '<%=request.getContextPath()%>/formsort.do?method=test',      waitTitle : '请等待' ,      waitMsg: '正在提交中',      success:function(form,action){                  //url后台返回的数据{success:true,msg:'成功'}                                           Ext.Msg.alert('提示','保存'+action.result.msg);      },      failure:function(form,action){      Ext.Msg.alert('提示','保存失败！');      }  });  
完整代码如下：

var form = new Ext.form.FormPanel({          frame : true ,          defaultType : 'textfield' ,          buttonAlign : 'center' ,          labelAlign : 'right' ,          //此处添加url，那么在getForm().sumit方法不需要在添加了url地址了          url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',           baseParams : {create : true },          labelWidth : 70 ,          items : [              {                  fieldLabel : 'id' ,                  xtype : 'hidden',                  name : 'formSortUuid'              },              {                  fieldLabel : '名称' ,                  name : 'sortName'              },{                  fieldLabel : '描述' ,                  xtype : 'textarea' ,                  name : 'description'              }          ] ,          buttons : [              {                  text : '确定' ,                  handler : function(){                      //FormPanel自身带异步提交方式                      form.getForm().submit({                      //url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',                      waitTitle : '请等待' ,                      waitMsg: '正在提交中',                      success:function(form,action){                                  //url后台返回的数据{success:true,msg:'成功'}                                                           Ext.Msg.alert('提示','保存'+action.result.msg);                      },                      failure:function(form,action){                      Ext.Msg.alert('提示','保存失败！');                      }                     });                   }                                }           ]  });   
1.2原始的HTML表单的提交方式
采用原始的提交方式需要覆盖掉BasicForm的onSubmit和submit方法，完了直接调用submit即可
代码如下：

var form = new Ext.form.FormPanel({          frame : true ,          defaultType : 'textfield' ,          buttonAlign : 'center' ,          labelAlign : 'right' ,          baseParams : {create : true },          //覆盖BasicForm的onSubmit方法          onSubmit: Ext.emptyFn,          //覆盖BasicForm的submit方法          submit: function() {              form.getForm().getEl().dom.action = '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort' ;              form.getForm().getEl().dom.submit();          },          labelWidth : 70 ,          items : [              {                  fieldLabel : 'id' ,                  xtype : 'hidden',                  name : 'formSortUuid'              },              {                  fieldLabel : '名称' ,                  name : 'sortName'              },{                  fieldLabel : '描述' ,                  xtype : 'textarea' ,                  name : 'description'              }          ] ,          buttons : [              {                  text : '确定' ,                  handler : function(){                   /*采用传统的HTML的同步提交*/                       form.getForm().submit();                  }                                }           ]  });  
  说明：在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方法，要求数据返回方式必须满足以下格式
  
{          success: true,          data: {          formSortUuid: "Fred. Olsen Lines",          namename: "FXT",          description: "OSL"          }   }  
完整代码如下:
  
var form = new Ext.form.FormPanel({          frame : true ,          defaultType : 'textfield' ,          buttonAlign : 'center' ,          labelAlign : 'right' ,          baseParams : {create : true },          labelWidth : 70 ,          items : [              {                  fieldLabel : 'id' ,                  xtype : 'hidden',                  name : 'formSortUuid'              },              {                  fieldLabel : '名称' ,                  name : 'sortName'              },{                  fieldLabel : '描述' ,                  xtype : 'textarea' ,                  name : 'description'              }          ] ,          buttons : [              {                  text : '加载' ,                  handler : function(){                  /*                 {                         success: true,                         data: {                         formSortUuid: "Fred. Olsen Lines",                         namename: "FXT",                         description: "OSL"                         }                  }                 */                  form.getForm().load({                      url: '<%=request.getContextPath()%>/formsort.do?method=saveOrUpdateFormSort',                      waitTitle : '请等待' ,                      waitMsg: '正在加载中',                      success:function(form,action){                                  alert(action.result.data)                                                                               },                      failure:function(form,action){                      Ext.Msg.alert('提示','保存失败！');                      }                  });                                }           ]  });