Extjs Form用法詳解（適用於Extjs5）

extjs form用法詳解（適用於extjs5）

extjs

form是乙個比較常用的控制項，主要用來顯示和編輯資料的，今天這篇文章將介紹extjs form控制項的詳細用法，包括建立form、新增子項、載入和更新資料、驗證等。

本文的示例**適用於extjs 4.x和extjs 5.x，在extjs 4.2.1 和extjs 5.0.1中親測可用！

本文由齊飛（

[email protected]

）原創，並發布在

extjs教程

、extjs5教程

extjs form和form basic是兩個東西，form提供介面的展示，而form basic則提供資料的處理、驗證等功能。每乙個form panel在建立的時候，都會繫結乙個form basic，我們可以通過方法getform來獲取：

form.getform()

在api方面，form的config中沒有顯示form basic的config，但是form basic的config在form的config中完全有效，也就是說，當我們使用extjs form的時候，不僅僅要檢視form的api文件，還要瀏覽相關的form basic的文件。

var 
form = ext.create(
"ext.form.panel"
, ,fielddefaults: ,
items: [,]
},,]},
],buttons: [
]});

以上**將建立乙個form表單，效果如下：

在extjs form中，預設的布局方式是layout: 'anchor'，具體的extjs 布局可以參考我的extjs 布局系統詳解這篇文章。

anchor預設每行只顯示乙個控制項，如果我們要在一行中顯示多個，需要將這些控制項放在乙個container中，並設定container的layout為hbox。

form可以載入model資料，也可以載入json資料，這樣我們可以方便的將json或者record資料顯示在extjs form控制項中。

extjs form通過方法loadrecord載入record，**如下：

var 
userrecord = ext.create(
, );
form.loadrecord(userrecord);

extjs form可以通過呼叫formbasic的setvalues方法來載入json資料，**如下：

var 
data = ;
form.getform().setvalues(data);

通過上面的方法，我們可以為form載入record或json資料。當我們完成編輯之後，還需要獲取編輯後的資料，或者將編輯後的資料更新到對應的record中，extjs form提供了相應的方法來完成這些操作。

如果extjs form載入的是record：

form.updaterecord();

如果extjs form載入的是json資料：

form.getform().getvalues()

extjs form除了可以載入頁面中已存在的資料外，還可以通過ajax的方式非同步載入與提交資料。這種方法不太常用。

form.getform().load();

伺服器返回的資料格式如下：

form.submit(
});

submit方法提交的資料為form中的所有value，可以在伺服器端獲取到。

在所有開發語言中，客戶端驗證是必不可少的。extjs form也提供了客戶端驗證機制，我們可以通過vtype來實現客戶端驗證。接下來我們詳細的了解一下extjs的客戶端驗證。

效果：**：

效果：

**：

值大小的限制常用於numberfield、datefield，可以指定乙個可用值的範圍。

效果：**：

vtype提供了一些公用的驗證型別，它們包括：

這四種是extjs內建的，已經提供給我們可以直接來用的。我們拿email來進行示例。

效果：**：

上面介紹了vtype的簡單用法，可以看到這種驗證是非常好用的，但是小夥伴們不覺得extjs提供的vtype太少嗎？

小夥伴們不要嫌棄，接下來我們看一下如何自定義vtype，**：

//驗證ip位址
function 
(v) \.\d\.\d\.\d$/
.test(v);
},ipaddresstext: 
'只能輸入ip位址'
,ipaddressmask: 
/[\d\.]/i
});

用法：

效果：

本文由齊飛（

[email protected]

）原創，並發布在

extjs教程

、extjs5教程

extjs form用法詳解（適用於extjs5）

Extjs Form用法詳解（適用於Extjs5）

const用法詳解

const 用法詳解

extern用法詳解

Extjs Form用法詳解（適用於Extjs5）

const用法詳解

const 用法詳解

extern用法詳解

相關推薦