[ ExtJS2.0 開發指南 ] CH4 : 常用表單 - 表單及表單元素 (2)

Ext.form.TextField 文本區 : 
Ext.form.TextField 組件擴展自 Ext.form.Field 類. 它是一個基本的文字輸入字段, 可以直接用來替代 HTML 表單組件 input type="text" , 或者作為基類為更多特殊的輸入組件提供支持 (如 Ext.form.NumberField 組件). 下表列出 Ext.form.TextField 組件的主要配置項, 其中部分配置在 TextField 已出現過不再贅述 : 
 
 

在下面範例中將以一個登錄頁面中常見的表單為例, 主要包括用戶名與密碼兩個輸入框, 現在有許多網站要求用戶的登錄名是使用電子郵件, 在這個範例中便要求用戶名必須是 e-mail 格式, 如果格式不正確會自動給出提示. 透過這個範例希望可以對文本框的使用有一個基本的了解 : 

執行結果 : 
 

上面代碼演示 Ext.form.TextField 組件的使用方式, 重點介紹對用戶輸入內容進行驗證的相關配置, 這些配置包括 regex (正則表示式), allowBlank (是否運行為空), 並且透過 inputType 實現了密碼輸入功能. 要注意的是正則表示式的驗證會在所有基本驗證完成後才會被調用. 

Ext.form.TextArea 多行文本 : 
Ext.form.TextArea 組件擴展自 Ext.form.TextField 組件, 主要用來滿足多行文本輸入的需要, 可以直接用來替換 HTML 表單組件 textarea. Ext.form.TextArea 的主要配置項與 Ext.form.TextField 組件相同 (可以參考表 4-8). 底下只列出 Ext.form.TextArea 組件特有的配置項 : 
 
範例代碼 : 

執行結果 : 
 
上面代碼透過組件 ID 獲取組件及獲取表單組件輸入值的方法, 這種取值與 JavaScript 中經常用的 document.getElementById() 有異曲同工之妙. 

Ext.form.NumberField 數字輸入框 : 
Ext.form.NumberField 擴展自 Ext.form.TextField 組件, 實現了自動按鈕和數字驗證. 在嚴格要求輸入數字的場合有用, 免去編寫相關驗證的複雜邏輯, 使簡化編程的典型應用. 下表列出 Ext.form.NumberField 特有的配置項, 從配置項可以知道所支援的數字輸入框的特點. 
 

範例代碼 : 

執行結果 : 
 
Ps. 

decimalPrecision (精確度) 配置項會產生四捨五入的效果. 如果給精確度2, 當用戶輸入 10.2352 數值後不會立即生效, 而當用戶輸入完畢後並離開焦點後輸入框數據驗證會自動將 10.2352 進行四捨五入, 數值被修正為 10.24.

Ext.form.Checkbox 複選框 與 Ext.form.Radio 單選框 : 
複選框組件在現在的 Web 頁面很常見, 它允許用戶針對一系列相關選項進行多項選取. Ext.form.CheckBox 組件擴展自 Ext.form.Field 組件, 可以用來直接取代 HTML 表單組件 input type = "checkbox". 單選框組件是多選框的一個擴展, 它允許用戶針對一系列相關選項進行單向選擇. Ext.form.Radio 組件擴展自 Ext.form.Checkbox 組件, 可以用來替換 HTML 表單組件 input type="Radio". 名字相同的 Ext.form.Radio 將被自動視為一組. Ext.form.Radio 的主要配置與 Ext.from.Checkbox (複選框) 組件相同, 請參考下面表格 : 
 

範例代碼 : 

執行結果 : 
 
上面代碼示範 Ext.form.Checkbox 與 Ext.form.Radio 的使用, 默認情況下表單面板組件都是縱向排列, 因此對於複選框與單選框組件並不適合. 下一個代碼會給一個橫排組件的解決辦法. 參考代碼如下 : 

執行結果 : 
 

Ext.form.TriggerField 觸發字段 : 
Ext.form.TriggerField 組件擴充自 Ext.form.TextField 組件, 增加了一個可以單擊觸發按鈕. 這個按鈕沒有默認動作, 必須指派調用函數. Ext.form.TriggerField 組件既可以直接創建也可以作為基類來擴展, 例如在 Ext.form.ComboBox 組件與 Ext.form.DateField 組件就是以 Ext.form.TriggerField 為基類擴展而來. 底下是其主要配置項目表 : 
 
範例代碼 : 

執行結果 : 
 
在實際開發中很少直接使用 Ext.form.Trigger.Field 字段而是使用它的子類, 在 Ext.form.ComboBox (組合框) 是 Ext.form.TriggerField 一個非常有用的擴展. 

Ext.form.Hidden 隱藏字段 : 
該隱藏字段用於表單中儲存隱藏值. 因為是隱藏字段所以該組件沒有圖形化的表現形式, 可以直接用來替代 HTML 表單組件 input type="hidden", 範例如下 : 

執行結果 : 
 
上面代碼共創建 3 個字段, 分別是姓名, 年齡與性別, 其中年齡是隱藏字段, 故在頁面不顯示而只能看到姓名與性別.