extjsフォームのFormPanelはデータを提出して、データをロードします.

回転:
http://liuna718-163-com.iteye.com/blog/805522
Extjsを使う中で、GridPanelを除いて一番多く使うべきなのはFormPanelです.FormPanelを使うには必ず欠かせません.データの提出とロードは今本人がまとめたFormPanelデータの提出とロードの方法です.
1.FormPanelデータの提出には、Baic Formのsubmit方式を使ってajaxの非同期提出を行う方法と、元のHTMLフォームを使った提出方法があります.
1.1 Baic Formの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フォームの提出方式
オリジナルの提出方式を採用するには、Baic Formのワンストップと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();  
                }  
                  
            }   
        ]  
});  

  説明:Baic Formの中にstandar Submitがあります.Boolean
この項目がtrueに設定されている場合、標準のHTMLフォームを使ってXHR(Ajax)方式の代わりに提出します.(標準値はfalse)
FormPanelでstandrdSubmitをtrueに設定すれば、同期して提出することができますが、extjs 2.0バージョンのsumitソースには元のフォームのaction属性が指定されていないので、提出することはできませんでしたが、3.0バージョンで追加されました.直接にstandaySubmitを指定してtrueで同期して提出することができます.
2.FormPanelデータのロードは1 BaicFormのロード方法を採用する
1 BaicFormのロード方法は、データの戻り方が以下のフォーマットを満たす必要があります.
 

{  
        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('  ','    ！');  
                    }  
                });  
                  
            }   
        ]  
});