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

前言 : 
表單在 Web 應用在於收集用戶訊息並與用戶進行交互溝通, 並將收集到的訊息提交到後台服務器. 也就是說表單是客戶端與服務器之間溝通的橋梁. 
傳統的表單形式單一, 無法複雜操作 (如數據驗證, 錯誤提示等), 並且無法滿足豐富的客戶端要求. 而 ExtJS 表單及其表單組件很好的改善這種情況而形成一系列美觀的 ExtJS 表單組件, 通過這些組件不但可以實現原本 HTML 標準表單的全部功能還可以使用大量的擴展特性 : 

* 表單的異步提交
* 可配置的表單數據驗證.
* 可配置的表單錯誤訊息提示.
* 對特殊數據 (日期, 日期, 時間等) 輸入組件的支持.

了解 Ext.form.BasicForm 基本表單 : 
Ext.form.BasicForm 是基本的表單組件, 提供表單動作的支持並負責初始化已有的字段組件. 默認情況下表單採用 Ajax 方式進行異步數據提交, 如果要使用原始提交方式可以覆蓋表單的 onSubmit() 及 Submit() 方法. 在 ExtJS 文檔中給出標準實現, 代碼如下 : 

上述代碼中介紹直接操作底層表單的做法. 在 表4-1 和 表4-2 分別列出 Ext.form.BasicForm 的主要配置項及常用方法, 這些配置項和方法基本上包含常見的表單操作, 掌握他們即掌握表單的基礎. 
 
表 4-1 中列舉了 Ext.form.BasicForm 配置項, 這些配置項被繼承到 Ext.form.FormPanel 中, 在 FormPanel 中可以直接使用這些配置項. 

 
表 4-2 列舉主要的 Ext.form.BasicForm 方法, 這些方法被繼承到 Ext.form.FormPanel 中, 在 FormPanel 中可以直接使用. 到這裡已經對基本表單組件有初步認識, 在開發過程中並不會直接使用 BasicForm 組件, 而是使用他的子類 - 表單面板組件 FormPanel, 該組件繼承 BasicForm 組件全部屬性與方法. 

認識 Ext.form.FormPanel 表單面板 : 
現在要介紹 ExtJS 的表單面板組件 Ext.form.FormPanel. 它擴展自 Ext.Panel (面板) 組件, 是表單項的容器, 它可以接受所有在 Ext.form.BasicForm 中出現的配置項. Ext.form.FormPanel 和 HTML 原始表單不僅表現形式不同, 對表單的操作及處理也並不相同, 這些不同表現在表單的提交方式, 表單驗證與對表單組件支持 3 個方面, 下面針對這三方面進行說明. 
1. 表單提交方式 

HTML 原始表單 (form) 使用 form.submit() 的方式進行提交, 這種提交方式是同步進行並會導致瀏覽器頁面跳轉, 進而導致打斷用戶操作降低用戶體驗. 相反的 Ext.form.FormPanel 的表單提交是使用 Ajax 方式異步進行, 不會打斷用戶操作並有力於改善用戶體驗.

2. 對表單驗證的支持 

HTML 原始表單並不支持表單組件的驗證功能, 在需要驗證場合由程序員自行編寫相應驗證代碼, 並在表單提交前進行調用以保證提交數據的正確性. Ext.form.FormPanel 已經支持常見的表單驗證功能, 只需要在組件上進行必要的配置就可以實現對輸入數據的本地驗證, 並且這個驗證是不需要程序員自行調用, 在表單提交前就會自動調用驗證功能, 並對出現錯誤輸入給出相應提示.

3. 對表單組件的支持 

HTML 原始表單支持表單組件和 Ext.form.FormPanel 支持的表單組件非常不同, Ext.form.FormPanel 支持的表單組件全部是經過 ExtJS 封裝過後的組件對像, 具有更多的高級功能. 相關說明可以參考後續介紹的範例代碼.

Ext.form.Field 表單字段 : 
Ext.form.Field 是表單字段的基類, 它擴展自 Ext.BoxComponent, 主要提供對表單字段一般功能的支持, 其他表單字段都需要從 Ext.form.Field 類別進行擴展, 如 Ext.form.TextField, Ext.form.Checkbox 等. 下表列出了 Ext.form.Field 的主要配置與常用方法 : 
 

在下面例子中使用 Ext.form.TextField 組件與 Ext.form.NumberField 組件, 這兩個組件的詳細用法會在後續章節介紹. 這裡要示範不同位置的提示訊息 : 

執行結果 (分別使用 'qtip', 'title', 'under' 與 'side') : 
 

由上面介紹可以選擇適合自己的顯示訊息方式, 但是要注意使用 'under' 時容易發生表單高度固定導致不足以容納下移的表單字段 (多了提示訊息), 使得部分字段無法正常顯示. 或是使用 'side' 但是表單寬度過小導致字段右側錯誤訊息無法正常顯示. 如此可以自己調適表單的高度或寬度來解決問題. 
另外如果你要一次性指定所有的表單提示訊息方式, 可以在 Ext.QuickTips.init(); 的下一句寫入下面一行就可以統一指定表單字段的錯誤訊息 : 

Ext.form.Field.prototype.msgTarget = 'side';