日期:2014-05-16 浏览次数:20336 次
在使用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
{ 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(){ /* {