今天我們要看看強(qiáng)大的FormPanel,也是繼承panel組件的使用。
首先弄清楚這個(gè)問題，創(chuàng)建的時(shí)候： 
//查看源代碼便知，兩種方法是一樣的
Ext.form.FormPanel = Ext.FormPanel;
我們還是從最簡(jiǎn)單的代碼實(shí)例開始吧：
<!--html代碼-->
<body>
<div id="form1"></div>
</body>

//js代碼
var form1 = new Ext.form.FormPanel({
       width:350,
       frame:true,//圓角和淺藍(lán)色背景
       renderTo:"form1",//呈現(xiàn)
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       items:[
          {
            fieldLabel:"UserName",//文本框標(biāo)題
            xtype:"textfield",//表單文本框
            name:"user",
            id:"user",
            width:200
          },
          {
            fieldLabel:"PassWord",
            xtype:"textfield",
            name:"pass",
            id:"pass",
            width:200
          }
       ],
       buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}]
    });

都是通過(guò)items屬性參數(shù)把表單元素添加到這個(gè)表單中。
我們發(fā)現(xiàn)兩個(gè)文本框的類型和狂度是一樣的，我們還可以把items里面的相同項(xiàng)提取出來(lái)，以簡(jiǎn)化代碼：
//簡(jiǎn)化代碼，和上面的代碼效果一樣
var form1 = new Ext.form.FormPanel({
       width:350,
       frame:true,
       renderTo:"form1",
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       defaults:{width:200,xtype:"textfield"},//*****簡(jiǎn)化****//
       items:[
          {
            fieldLabel:"UserName",
            //xtype:"textfield",
            name:"user",
            id:"user",
            //width:200
          },
          {
            fieldLabel:"PassWord",
            //xtype:"textfield",
            name:"pass",
            id:"pass",
            inputType:"password",
            //width:200
          }
       ],
       buttons:[{text:"確定"},{text:"取消",handler:function(){alert();}}]
    });

關(guān)于inputType,參數(shù)如下：
//input的各種類型（這個(gè)大家都知道，就只列了幾個(gè)典型的）
radio
check
text(默認(rèn))
file
password等等
關(guān)于FormPanel的配置參數(shù)，請(qǐng)主要參考panel的參數(shù)，這里列舉另外兩個(gè)：
1.labelAlign:fieldlabel的排列位置，默認(rèn)為"left"，其他兩個(gè)枚舉值是"center","right"
2.labelWidth:fieldlabel的占位寬
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函數(shù) //稍后我們一起詳細(xì)分析

1.FormPanel的fieldset應(yīng)用
//把前面代碼重寫items屬性
items:[
          {
            xtype:'fieldset',
            title: '個(gè)人信息',
            collapsible: true,
            autoHeight:true,
            width:330,
            defaults: {width: 150},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: '愛好',
                    name: 'hobby',
                    value: 'www.cnblogs.com'
                },{
                    xtype:"combo",
                    name: 'sex',
                    store:["男","女","保密"],//數(shù)據(jù)源為一數(shù)組
                    fieldLabel:"性別",
                    emptyText:'請(qǐng)選擇性別.'
                }]
            }
       ]


這里的combox組件只是簡(jiǎn)單的演示，具體還是要深入了解，我們會(huì)在以后的內(nèi)容中詳細(xì)探討。
2.關(guān)于xtype的類型，在extjs的form表單（其他的請(qǐng)參考api）中已經(jīng)定義的有：
Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

3.可選的fieldset實(shí)例
   其實(shí)就是帶個(gè)chechbox，有點(diǎn)像論壇注冊(cè)時(shí)有一部分是選填信息的那種效果，主要知識(shí)點(diǎn)：
//因?yàn)橛X得這個(gè)參數(shù)特別，特舉一例以說(shuō)明
1.checkboxToggle:true//true則呈現(xiàn)一個(gè)帶checkbox的fieldset，選中則展開，否則相反，默認(rèn)為false
2.checkboxName:string//當(dāng)上面為true時(shí)，作為checkbox的name，方便表單操作
{
xtype:"fieldset",
checkboxToggle:true,//關(guān)鍵參數(shù)，其他和以前的一樣
checkboxName:"dfdf",
title:"選填信息",
defaultType:'textfield',
width:330,
autoHeight:true,//使自適應(yīng)展開排版
items:[{
    fieldLabel:"UserName",
    name:"user",
    anchor:"95%"//330px-labelWidth剩下的寬度的95%，留下5%作為后面提到的驗(yàn)證錯(cuò)誤提示
  },
  {
    fieldLabel:"PassWord",
    inputType:"password",//密碼文本
    name:"pass",
    anchor:"95%"
  }]
}



4.表單驗(yàn)證實(shí)例（空驗(yàn)證，密碼確認(rèn)驗(yàn)證，email驗(yàn)證）
我們可以用單獨(dú)的js寫表單驗(yàn)證，但是extjs已經(jīng)為我們想到了（自己?jiǎn)为?dú)寫反而不方便）。
在驗(yàn)證之前，我不得不提兩個(gè)小知識(shí)點(diǎn)：
//大家在很多的extjs代碼中都看到了這兩個(gè)，他們都起提示作用的
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚舉值為"qtip","title","under","side",id(元素id)
          //side方式用的較多，右邊出現(xiàn)紅色感嘆號(hào)，鼠標(biāo)上去出現(xiàn)錯(cuò)誤提示，其他的我就不介紹了，可自行驗(yàn)證
//大家可以分別去掉這兩行代碼，看效果就會(huì)明白他們的作用，（放在onReady的function（）{}中）

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:"不能為空，請(qǐng)?zhí)顚?/span>",//錯(cuò)誤提示信息，默認(rèn)為This field is required!
                id:"blanktest",
                anchor:"90%"
               }
       ]
    });


2.用vtype格式進(jìn)行簡(jiǎn)單的驗(yàn)證。
在此舉郵件驗(yàn)證的例子，重寫上面代碼的items配置:
items:[
               {fieldLabel:"不能為空",
                vtype:"email",//email格式驗(yàn)證
                vtypeText:"不是有效的郵箱地址",//錯(cuò)誤提示信息,默認(rèn)值我就不說(shuō)了
                id:"blanktest",
                anchor:"90%"
               }

你可以修改上面的vtype為以下的幾種extjs的vtype默認(rèn)支持的驗(yàn)證：
//form驗(yàn)證中vtype的默認(rèn)支持類型
1.alpha //只能輸入字母，無(wú)法輸入其他（如數(shù)字，特殊符號(hào)等）
2.alphanum//只能輸入字母和數(shù)字，無(wú)法輸入其他
3.email//email驗(yàn)證，要求的格式是"langsin@gmail.com"
4.url//url格式驗(yàn)證，要求的格式是http://www.langsin.com

3.確認(rèn)密碼驗(yàn)證（高級(jí)自定義驗(yàn)證）
前面的驗(yàn)證都是extjs已經(jīng)提供的驗(yàn)證，我們也可以自定義驗(yàn)證函數(shù)，比上面要復(fù)雜點(diǎn)了。我們一起做一個(gè)密碼確認(rèn)的例子。
我們修改前面的代碼：
//先用Ext.apply方法添加自定義的password驗(yàn)證函數(shù)（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
    password:function(val,field){//val指這里的文本框值，field指這個(gè)文本框組件，大家要明白這個(gè)意思
       if(field.confirmTo){//confirmTo是我們自定義的配置參數(shù)，一般用來(lái)保存另外的組件的id值
           var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個(gè)id的值
           return (val==pwd.getValue());
       }
       return true;
    }
});
//配置items參數(shù)
items:[{fieldLabel:"密碼",
                id:"pass1",
                anchor:"90%"
               },{
                fieldLabel:"確認(rèn)密碼",
                id:"pass2",
                vtype:"password",//自定義的驗(yàn)證類型
                  vtypeText:"兩次密碼不一致！",
                  confirmTo:"pass1",//要比較的另外一個(gè)的組件的id
                anchor:"90%"
               }