我們基本上對form表單中常見組件有了簡單的認識，今天我們做個綜合點的例子，向服務器提交下！
其實這篇文章很簡單，沒有什么發光點，暫放首頁半天,忘各位理解！
先來個簡單的例子，以說明formpanel如何把數據傳給其他頁面。

現在我們要實現的效果是：點擊確定，把值傳到另一頁面！，如下：
Ext.onReady(function(){
  Ext.QuickTips.init();
  var form=new Ext.FormPanel({
     frame:true,
     width:300,
     //monitorValid:true,//綁定驗證
     layout:"form",
     labelWidth:70,
     title:"添加個人信息",
     labelAlign:"left",
     renderTo:Ext.getBody(),
     submit: function(){
                    this.getEl().dom.action = 'GetForm.aspx',
                    this.getEl().dom.method='POST',
                    this.getEl().dom.submit();
              },
     items:[{
               xtype:"textfield",
               fieldLabel:"用戶名",
               //id:"UserName",
               allowBlank:false,
               blankText:"不能為空，請正確填寫",
               name:"UserName",
               anchor:"90%"
           },{
               xtype:"textfield",
               fieldLabel:"昵稱",
               //id:"SmallName",
               name:"SmallName",
               anchor:"90%"
           },{
               xtype:"datefield",
               fieldLabel:"注冊日期",
               //id:"RegDate",
               name:"RegDate",
               anchor:"90%"
           }],
       });


//幾點說明
1.首先定義submit參數的執行函數，即：
   submit: function(){
                    this.getEl().dom.action = 'GetForm.aspx',//轉向頁面地址
                    this.getEl().dom.method='POST',//方式
                    this.getEl().dom.submit();//提交！
              },
2.為按鈕添加觸發相應的提交（取消）事件（這樣就不是默認的ajax提交）：
   buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
  });
  function login(){
         form.form.submit();//提交
   }
   function reset(){
         form.form.reset();//取消
   }
3.如果你想綁定驗證，在form表單添加參數monitorValid:true,然后在按鈕配置參數中添加formBind：true，如
       buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
則只有所有的填寫字段都滿足條件時，"確定"方可提交！如下圖，




好了，一個簡單的formpanel的提交的原理弄清楚啦！
下面我們來做個復雜點（只是樣子）的form，示例一下（還是上面的原理）！

Ext.onReady(function(){
  Ext.QuickTips.init();
  var form=new Ext.FormPanel({
     frame:true,
     width:500,
     monitorValid:true,//把有formBind:true的按鈕和驗證綁定
     layout:"form",
     labelWidth:55,
     title:"添加個人信息",
     labelAlign:"right",
     renderTo:Ext.getBody(),
     submit: function(){
                    this.getEl().dom.action = 'GetForm.aspx',
                    this.getEl().dom.method='POST',
                    this.getEl().dom.submit();
              },
     items:[{
               xtype:"panel",
               layout:"column",
               fieldLabel:"用戶名",
               isFormField:true,
               items:[{
                         columnWidth:.5,
                         xtype:"textfield",
                         allowBlank:false,
                         blankText:"不能為空，請填寫",
                         name:"UserName",
                         anchor:"90%"
               },{
                         columnWidth:.20,
                         layout:"form",
                         labelWidth:40,
                         labelAlign:"right",
                         items:[{
                                   xtype:"radio",
                                   fieldLabel:"性別",
                                   boxLabel:"男",
                                   name:"Sex",
                                   checked:true,
                                   inputValue:"man",//這里如果用value，值是on，所以用inputValue（出現這種情況的是radio,checkbox）
                                   anchor:"95%"
                         }]
               },{
                         columnWidth:.30,
                         layout:"form",
                         labelWidth:1,//讓標簽寬度為很小的值（奇怪的是為0時反而不行）
                         items:[{
                                   xtype:"radio",
                                   boxLabel:"女",
                                   labelSeparator:"",//去除分隔符“：”
                                   name:"Sex",
                                   inputValue:"woman",
                                   anchor:"95%"
                         }]
               }]
     },{//上面是第一行
               xtype:"panel",
               layout:"column",
               fieldLabel:"出生日期",
               isFormField:true,
               items:[{
                         columnWidth:.5,
                         xtype:"datefield",
                         name:"BirthDate",
                         anchor:"90%"
               },{
                         columnWidth:.5,
                         layout:"form",
                         labelWidth:40,//注意，這個參數在這里可以調整簡單fieldLabel的布局位置
                         items:[{
                                   xtype:"combo",
                                   name:"Degree",
                                   fieldLabel:"學位",
                                   store:["小學","初中","高中","專科","本科","碩士","博士"],
                                   emptyText:"請選擇適合你的學歷",
                                   anchor:"90%"
                         }]
               }]
     },{//上面是第二行
               xtype:"panel",
               layout:"column",
               isFormField:true,
               fieldLabel:"使用框架",
               items:[{
                         columnWidth:.2,
                         xtype:"checkbox",
                         boxLabel:"Spring.net",
                         name:"SpringNet",
                         inputValue:"spring"//這里如果用value，值是on，所以用inputValue
               },{
                         columnWidth:.2,
                         layout:"form",
                         labelWidth:1,
                         items:[{
                                   xtype:"checkbox",
                                   boxLabel:"Nhibernate",
                                   labelSeparator:"",
                                   name:"NHibernate",
                                   inputValue:"nhibernate",
                                   anchor:"95%"
                         }]
               },{
                         columnWidth:.6,
                         layout:"form",
                         labelWidth:1,
                         items:[{
                                   xtype:"checkbox",
                                   boxLabel:"Linq",
                                   labelSeparator:"",
                                   name:"Linq",
                                   inputValue:"linq",
                                   anchor:"95%"
                         }]
               }]
               
     },{//上面是第三行
               xtype:"textfield",
               fieldLabel:"Email",
               name:"Email",
               vtype:"email",//email驗證,如果想自定義驗證的話，請參見前面的文章
               vtypeText:"email格式錯誤！",
               anchor:"56%"//控制文本框的長度
               
     },{//上面是第四行
               xtype:"textarea",
               fieldLabel:"個性簽名",
               name:"OneWord",
               height:50,
               anchor:"95%"
     },{//上面是第五行
               xtype:"htmleditor",
               fieldLabel:"想說的話",
               name:"WantToSay",
               anchor:"95%",
               enableAlignments:false,//去除左右對齊工具欄
               enableLists:false//去除列表工具欄
     }],
      buttons:[{text:"確定",handler:login,formBind:true},{text:"取消",handler:reset}]
  });
  function login(){
         form.form.submit();
   }
   function reset(){
         form.form.reset();
   }
});

經過一個簡單的傳值原理傳值后，一個表單就可以把數據存儲到數據庫中去了！

//注意幾點
1.綁定驗證的兩個參數 monitorValid:true,formBind:true
2.精確布局要注意的參數為和width有關的：width:500,labelWidth:55,columnWidth:.5,anchor:"90%",isFormField:true等
3.radio和checkbox通過inputValue獲取值，頁面傳值
4.多列多組件布局為form和column和form布局組合使用，請參考源碼分析！