上篇中我們簡單的談到了FormPanel中的fieldset和ComboBox,今天我們繼續把這個話題說下去，說全一點，說深一點。
3.可選的fieldset執行個體
其實就是帶個chechbox，有點像論壇註冊時有一部分是選填資訊的那種效果，主要知識點：
//因為覺得這個參數特別，特舉一例以說明
1.checkboxToggle:true//true則呈現一個帶checkbox的fieldset，選中則展開，否則相反，預設為false
2.checkboxName:string//當上面為true時，作為checkbox的name，方便表單操作
這裡我把js核心代碼貼出來(html代碼與上一篇中完全相同，不列出)：
//在上一節的基礎代碼的items裡面添加如下配置
{
xtype:"fieldset",
checkboxToggle:true,//關鍵參數，其他和以前的一樣
checkboxName:"dfdf",
title:"選填資訊",
defaultType:'textfield',
width:330,
autoHeight:true,//使自適應展開排版
items:[{
fieldLabel:"UserName",
name:"user",
anchor:"95%"//330px-labelWidth剩下的寬度的95%，留下5%作為後面提到的驗證錯誤提示
},
{
fieldLabel:"PassWord",
inputType:"password",//密碼文本
name:"pass",
anchor:"95%"
}]
}
4.表單驗證執行個體（空驗證，密碼確認驗證，email驗證）
我們可以用單獨的js寫表單驗證，但是extjs已經為我們想到了（自己單獨寫反而不方便）。
在驗證之前，我不得不提兩個小知識點：
//大家在很多的extjs代碼中都看到了這兩個，他們都起提示作用的
Ext.QuickTips.init();//支援tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
//side方式用的較多，右邊出現紅色驚嘆號，滑鼠上去出現錯誤提示，其他的我就不介紹了，可自行驗證
//大家可以分別去掉這兩行代碼，看效果就會明白他們的作用，（放在onReady的function（）{}中）
1.我們看一個最簡單的例子：空驗證（其實這不算是一個專門的驗證例子）
//空驗證的兩個參數
1.allowBlank:false//false則不可為空，預設為true
2.blankText:string//當為空白時的錯誤提示資訊
js代碼為：
var form1 = new Ext.form.FormPanel({
width:350,
frame:true,
renderTo:"form1",
labelWidth:80,
title:"FormPanel",
bodyStyle:"padding:5px 5px 0",
defaults:{width:150,xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不可為空",
allowBlank:false,//不允許為空白
blankText:"不可為空，請填寫",//錯誤提示資訊，預設為This field is required!
id:"blanktest",
anchor:"90%"
}
]
});
2.用vtype格式進行簡單的驗證。
在此舉郵件驗證的例子，重寫上面代碼的items配置:
items:[
{fieldLabel:"不可為空",
vtype:"email",//email格式驗證
vtypeText:"不是有效郵箱地址",//錯誤提示資訊,預設值我就不說了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype為以下的幾種extjs的vtype預設支援的驗證：
//form驗證中vtype的預設支援類型
1.alpha //只能輸入字母，無法輸入其他（如數字，特殊符號等）
2.alphanum//只能輸入字母和數字，無法輸入其他
3.email//email驗證，要求的格式是"langsin@gmail.com"
4.url//url格式驗證，要求的格式是http://***
3.確認密碼驗證（進階自訂驗證）
前面的驗證都是extjs已經提供的驗證，我們也可以自訂驗證函式，比上面要複雜點了。我們一起做一個密碼確認的例子。
我們修改前面的代碼：
//先用Ext.apply方法添加自訂的password驗證函式（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指這裡的文字框值，field指這個文字框組件，大家要明白這個意思
if(field.confirmTo){//confirmTo是我們自訂的配置參數，一般用來儲存另外的組件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items參數
items:[{fieldLabel:"密碼",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"確認密碼",
id:"pass2",
vtype:"password",//自訂的驗證類型
vtypeText:"兩次密碼不一致！",
confirmTo:"pass1",//要比較的另外一個的組件的id
anchor:"90%"
}
關於vtype的內容還有很多內容要挖掘，但現在我們就點到這裡為止，以後有機會再討論它的其他進階驗證。
不知不覺中寫了這麼多，大家都要歇息了，我們下次再接著討論，
