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

转自: 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('提示','保存失败!');  
                    }  
                });  
                  
            }   
        ]  
}); 

你可能感兴趣的:(html,Ajax,ext,Blog,ITeye)