今天我們做個綜合點的例子，向服務器提交下！
其實這篇文章很簡單，沒有什麼發光點，暫放首頁半天,忘各位理解！
先來個簡單的例子，以說明formpanel如何把數據傳給其他頁面。
效果圖：
現在我們要實現的效果是：點擊確定，把值傳到另一頁面！，如下：
原頁面js代碼爲：
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%"
}],
});
接受頁面GetForm.aspx的cs代碼爲：
protected void Page_Load(object sender, EventArgs e)
{
string UserName = Request.Form["UserName"];
string SmallName = Request.Form["SmallName"];
string RegDate = Request.Form["RegDate"];
Response.Write(UserName + "<br/>" + SmallName + "<br/>" + RegDate);
}
因爲很簡單，我做個簡要說明：
//幾點說明
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提交數據的方法有多種，大家可以參考http://www.17ext.com/showtopic-55.aspx（三種ext提交數據的方式），
以後有機會我們再討論！
下面我們來做個複雜點（只是樣子）的form，示例一下（還是上面的原理）！
效果圖：
傳到GetForm.aspx頁面後顯示：
不過在傳過來的頁面要記得ValidateRequest="false"，安全編碼我就暫且不討論了！
不過在傳過來的頁面要記得ValidateRequest="false"，安全編碼我就暫且不討論了！
js代碼：
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();
}
});
接受cs頁面的代碼：
protected void Page_Load(object sender, EventArgs e)
{
string UserName = Request.Form["UserName"];
string Sex = Request.Form["Sex"];
string BirthDate = Request.Form["BirthDate"];
string Degree = Request.Form["Degree"];
string SpringNet = Request.Form["SpringNet"];
string NHibernate = Request.Form["NHibernate"];
string Linq = Request.Form["Linq"];
string Email=Request.Form["Email"];
string OneWord = Request.Form["OneWord"];
string WantToSay = Request.Form["WantToSay"];
Response.Write("用戶名：" + UserName + "<br/>");
Response.Write("性別是：" + Sex + "<br/>");
Response.Write("出生日期:" + BirthDate + "<br/>");
Response.Write("學位：" + Degree + "<br/>");
Response.Write("使用框架有：");
if (SpringNet != null)
{
Response.Write(SpringNet + ",");
}
if (NHibernate != null)
{
Response.Write(NHibernate + ",");
}
if (Linq != null)
{
Response.Write(Linq + ",");
}
Response.Write("<br/>");
Response.Write("郵件地址：" + Email);
Response.Write("個性簽名：" + OneWord + "<br/>");
Response.Write("想說的話：" + WantToSay);
}
經過一個簡單的傳值原理傳值後，一個表單就可以把數據存儲到數據庫中去了！
//注意幾點
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佈局組合使用，請參考源碼分析！
至此，formpanel的簡單使用就告一段落，但是formpanel的應用還遠遠沒有講到，有機會我們再在高級篇裏討論！
謝謝各位朋友的支持！
在下篇中我們接着訴說另外一個組件tabpanel，希望各位支持，拍磚，給我動力！