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

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

都是通過items屬性參數把表單元素添加到這個表單中。
我們發現兩個文本框的類型和狂度是一樣的，我們還可以把items里面的相同項提取出來，以簡化代碼：
//簡化代碼，和上面的代碼效果一樣
var form1 = new Ext.form.FormPanel({
       width:350,
       frame:true,
       renderTo:"form1",
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       defaults:{width:200,xtype:"textfield"},//*****簡化****//
       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();}}]
    });

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

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


這里的combox組件只是簡單的演示，具體還是要深入了解，我們會在以后的內容中詳細探討。
2.關于xtype的類型，在extjs的form表單（其他的請參考api）中已經定義的有：
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實例
   其實就是帶個chechbox，有點像論壇注冊時有一部分是選填信息的那種效果，主要知識點：
//因為覺得這個參數特別，特舉一例以說明
1.checkboxToggle:true//true則呈現一個帶checkbox的fieldset，選中則展開，否則相反，默認為false
2.checkboxName:string//當上面為true時，作為checkbox的name，方便表單操作
{
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（）{}中）

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://www.langsin.com

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%"
               }