第四行的兩個輸入框主要是測試通過 vtypes 屬性來驗證輸入框的輸入的：
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: ' 電子郵件 ',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: ' 個人主頁 ',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
}
這裏的定義和普通的文本輸入框沒什麼區別，只是多了一個 vtypes 的屬性定義。 Vtypes 裏總共定義了 email 、 url 、 alpha 和 alphanum 四種類型數據格式， email 和 url 這個不用介紹了，呵呵。 alpha 是字母和下劃線的組合， alphanum 是字母、下劃線和數字的組合。
下面要加入一個 tabpanel ，加入 3 個 tab 頁。
{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}
要注意的是，這個 tabpanel 不是在上面 coulmn 的 items 里加的，因爲不在 column 裏。我們加在 formpanel 裏。把 item 類型設置爲 'tabpanel' 就行了，然後將標籤頁頭的背景設置爲透明的（ plain:true ），當前活動 的標籤頁是第一頁（ activeTab: 0 ），高度設置爲 235px （ height:235 ）， tab 頁的面板使用內補丁 10px （ defaults:{bodyStyle:'padding:10px'} ）。
好了，現在在 tabpanel 的 items 加入標籤頁。第一頁主要有兩個輸入控件，一個是 vtypes 類型 alphanum 的登錄輸入框和一個密碼輸入框。
{
title:' 登錄信息 ',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: ' 登錄名 ',
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: ' 密碼 ',
name: 'password',
allowBlank:false
}]
}
在標籤定義了，設置了標籤標題是登錄信息（ title:' 登錄信息 ' ），控件容器是 formlayout （ layout:'form' ），控件的默認寬度是 230px （ defaults: {width: 230} ），默認控件類型是 textfield （ defaultType: 'textfield' ）。
兩個控件的定義與前面的 textfield 定義沒什麼區別，只是密碼輸入框需要定義 input 控件的類型爲 password （ inputType:'password' ）。兩個控件都不允許爲空（ allowBlank:false ）。
第二個標籤頁裏有 numberfield 、 timefield 和 textfield 三個控件：
{
title:' 數字時間字母 ',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
xtype:'numberfield',
fieldLabel: ' 數字 ',
name: 'number'
},{
xtype:'timefield',
fieldLabel: ' 時間 ',
name: 'time'
},{
fieldLabel: ' 純字母 ',
name: 'char',
vtype:'alpha'
}]
}
Numberfield 顧名思義就是隻能輸入數字的輸入控件。在該例子，沒做最大值、最小值任何限制，如果要設置最大值和最小值，分別設置 maxValue 和 minValue 兩個屬性就行了。如果要設置數字輸入長度，例如身份證號碼，可以設置 maxLength 和 minLength 兩個屬性。可以通過設置 maxText 、 minText 、 maxLengthText 和 minLengthText 設置各自的驗證出錯信息。可通過 allowDecimals 屬性設置是否只允許輸入整型值，默認值是 true ，允許輸入浮點數。設置 allowNegative 設置是否只允許輸入正數，默認值是 true ，允許輸入正負數。通過 decimalPrecision 屬性可設置小數點後的位數，默認值是 2 位。
timefield 是新增加的時間輸入控件，起彌補日期輸入控件不能輸入時間的作用。它的定義也很簡單，設置類型爲 timefield 就行了。 timefield 默認時間格式是 12 小時制的，我們可通過修改 format 屬性來修改其數據格式。通過設置 increment 屬性可設置下拉選擇值得時間區間，默認值是 15 分鐘的。還可以和數字輸入控件一樣設置最大值和最小值。下拉的設置和 combobox 是一樣的。
在目前的版本中， timefield 類還沒有漢化，所以我們要在本地文件中加入 timefield 的漢化定義：
if(Ext .form.TimeField){
Ext.apply(Ext.form.TimeField.prototype, {
format:'G:i:s',
minText : " 該輸入項的時間必須大於或等於： {0}",
maxText : " 該輸入項的時間必須小於或等於： {0}",
invalidText : "{0} 不是有效的時間 ",
});
}
在這裏，我默認定義了時間格式是 24 小時制的，小時爲個位數是不加前綴 0 。
最後一個加入的是測試純字母輸入的，和 email 等是一樣的，我就不介紹了。
在最後一個 tab 頁中加入了一個 textarea 輸入
{
title:' 文本區域 ',
layout:'fit',
items: {
xtype:'textarea',
id:'area',
fieldLabel:''
}
}
最後一步就是爲 form 添加按鈕了，在 formpanel 的 buttons 屬性中我們加入了一個保存按鈕和取消按鈕：
buttons: [{
text: ' 保存 ',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert(' 操作 ',action.result.data); this.disabled=false;
},
failure:function(){
Ext.Msg.alert(' 操作 ',' 保存失敗！ ');
this.disabled=false;
}
});
}
}
},{
text: ' 取消 ',
handler:function(){simpleForm.form.reset();}
}]
在 formpanel 類中， form 屬性指向的是 formpanle 裏的 basicform 對象 ，我們可通過 formpanle.form 來使用該 basicform 對象。在被例子，我們已經將 formpanel 對象賦值給了 simpleForm 這個變量，所以我們可以通過 simpleForm.form 訪問面板裏的 basicform 對象。
在 buttons 裏定義的按鈕默認是 Ext.Button ，所以按鈕的屬性定義可以查看 Ext.Button 的 API 。在這裏兩個按鈕都沒用到其它屬性，只是設置了顯示文本（ text ）和單擊事件。
保存按鈕要做的就是先做 basicform 的客戶端驗證（ simpleForm.form.isValid() ），驗證通過了則設置該按鈕狀態爲 disable ，防止 2 次提交。然後調用 simpleForm.form.doAction 方法 提交數據。 doAction 方法的第一個參數“ submit ”的意思是表示執行的是提交操作，提交的後臺頁面是 test.asp （ url:'test.asp' ），提交方式是 post （ method:'post' ），沒有其它提交參數（ params:'' ），提交成功後執行 success 定義的函數，本例只是顯示一個保存成功信息。後臺返回的數據格式是需要我們注意的，一定要json格式，而且必須包含“ success:true”，不然不會執行 success定義的函數。 success 定義的函數返回兩個參數，第一是 form 本身，第二個是 ajax 返回的響應結果，在 action.result 這個 json 數組了保存了後臺返回的數據。例如本例後臺返回的 json 結構是“ {success:true,data:~~~} ”，其中 data 部分我將提交的數據將字段名和數據組合成一個字符串。在 success 函數中，我通過“ Ext.Msg.alert(' 操作 ',action.result.data); ”將 data 數據顯示出來。我們還定義 failure 函數，就是網絡通訊存在問題的時候將顯示錯誤信息。
取消按鈕就是簡單的 reset 一下 form 的控件。
如果想 form 按以前的老辦法提交，可以在 formpanel 的定義中加入一下設置：
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
第一個設置的目的是取消 formpanel 的默認提交函數。第二就是設置新的提交方式爲舊方式提交。
至此，我們已經簡單的學習 一次 2.0 版中的 form 控件，希望大家能從中獲得收益。如果有什麼疑問和建議，請聯繫我。多謝！