Extjs Form是一個比較常用的控件，主要用來顯示和編輯資料的，今天這篇文章将介紹Extjs Form控件的詳細用法，包括建立Form、添加子項、加載和更新資料、驗證等。
本文的示例代碼适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中親測可用！
Extjs Form和Form Basic是兩個東西，Form提供界面的展示，而Form Basic則提供資料的處理、驗證等功能。每一個Form Panel在建立的時候，都會綁定一個Form Basic，我們可以通過方法getForm來擷取：
在API方面，Form的config中沒有顯示Form Basic的config，但是Form Basic的config在Form的config中完全有效，也就是說，當我們使用Extjs Form的時候，不僅僅要檢視Form的API文檔，還要浏覽相關的Form Basic的文檔。
以上代碼将建立一個Form表單，效果如下：
在Extjs Form中，預設的布局方式是layout: 'anchor'，具體的Extjs 布局可以參考我的Extjs 布局系統詳解這篇文章。
anchor預設每行隻顯示一個控件，如果我們要在一行中顯示多個，需要将這些控件放在一個container中，并設定container的layout為hbox。
Form可以加載Model資料，也可以加載Json資料，這樣我們可以友善的将json或者record資料顯示在Extjs Form控件中。
Extjs Form通過方法loadRecord加載record，代碼如下：
Extjs Form可以通過調用formbasic的setValues方法來加載json資料，代碼如下：
通過上面的方法，我們可以為Form加載record或json資料。當我們完成編輯之後，還需要擷取編輯後的資料，或者将編輯後的資料更新到對應的record中，Extjs Form提供了相應的方法來完成這些操作。
如果Extjs Form加載的是record：
如果Extjs Form加載的是json資料：
Extjs Form除了可以加載頁面中已存在的資料外，還可以通過Ajax的方式異步加載與送出資料。這種方法不太常用。
伺服器傳回的資料格式如下：
submit方法送出的資料為Form中的所有value，可以在伺服器端擷取到。
在所有開發語言中，用戶端驗證是必不可少的。Extjs Form也提供了用戶端驗證機制，我們可以通過vtype來實作用戶端驗證。接下來我們詳細的了解一下Extjs的用戶端驗證。
效果：
代碼：
&
值大小的限制常用于numberfield、datefield，可以指定一個可用值的範圍。
vtype提供了一些公用的驗證類型，它們包括：
alpha：希臘數字
alphanum：字母和數字
email：電子郵件位址
url：網址
這四種是extjs内置的，已經提供給我們可以直接來用的。我們拿email來進行示例。
上面介紹了vtype的簡單用法，可以看到這種驗證是非常好用的，但是小夥伴們不覺得extjs提供的vtype太少嗎？
小夥伴們不要嫌棄，接下來我們看一下如何自定義vtype，代碼：
用法：
2021年9月 北京、西安兩地，高薪誠聘 .NET工程師，請私信聯系！
如果認為此文對您有幫助，别忘了支援一下哦！
聲明：本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論，與本人所在機關沒有直接利益關系。轉載時請在文章頁面明顯位置給出原文連結。