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

標籤：style   http   color   io   os   使用   ar   for   資料   

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

本文的範例程式碼適用於Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中親測可用！

本文由齊飛（[email protected]）原創，並發布在http://www.qeefee.com/article/extjs-form-in-detail，轉載請註明出處！推薦更多Extjs教程、Extjs5教程

Form和Form Basic

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的文檔。

建立Extjs Form控制項

var form = Ext.create("Ext.form.Panel", {    width: 500,    height: 300,    margin: 20,    title: "Form",    renderTo: Ext.getBody(),    collapsible: true,  //可摺疊    autoScroll: true,   //自動建立捲軸    defaultType: ‘textfield‘,    defaults: {        anchor: ‘100%‘,    },    fieldDefaults: {        labelWidth: 80,        labelAlign: "left",        flex: 1,        margin: 5    },    items: [        {            xtype: "container",            layout: "hbox",            items: [                { xtype: "textfield", name: "name", fieldLabel: "姓名", allowBlank: false },                { xtype: "numberfield", name: "age", fieldLabel: "年齡", decimalPrecision: 0, vtype: "age" }            ]        },        {            xtype: "container",            layout: "hbox",            items: [                { xtype: "textfield", name: "phone", fieldLabel: "電話", allowBlank: false, emptyText: "電話或手機號碼" },                { xtype: "textfield", name: "phone", fieldLabel: "郵箱", allowBlank: false, emptyText: "Email地址", vtype: "email" }            ]        },        {            xtype: "textareafield",            name: "remark",            fieldLabel: "備忘",            height: 50        }    ],    buttons: [        { xtype: "button", text: "儲存" }    ]});

以上代碼將建立一個Form表單，效果如下：

Extjs Form布局

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

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

 

Extjs Form載入資料

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

載入Record資料

Extjs Form通過方法loadRecord載入record，代碼如下：

var userRecord = Ext.create("MyApp.model.User", {    name: "Tom",    age: 25,    phone: "123456"});form.loadRecord(userRecord);

載入Json資料

Extjs Form可以通過調用formbasic的setValues方法來載入json資料，代碼如下：

var data = {    name: "Tom",    age: 25,    phone: "123456"};form.getForm().setValues(data);

Extjs Form擷取與更新資料

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

如果Extjs Form載入的是record：

form.updateRecord();

如果Extjs Form載入的是json資料：

form.getForm().getValues()

Extjs Form非同步載入與提交

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

非同步載入

form.getForm().load({    url: "form-data.ashx"});

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

{    success:true,    data:{        name: "Tom",        age: 25,        phone: "123456"    }}

非同步提交

form.submit({    url: "form-submit.ashx",    success: function (form, action) {        Ext.Msg.alert(‘Success‘, action.result.msg);    }});

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

本文由齊飛（[email protected]）原創，並發布在http://www.qeefee.com/article/extjs-form-in-detail，轉載請註明出處！推薦更多Extjs教程、Extjs5教程

Extjs Form驗證

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

必填項，就是不可為空（allowBlank）

效果：

代碼：

{    xtype: "textfield",    name: "UserName",    fieldLabel: "使用者名稱",    allowBlank: false,    flex: 1}

輸入長度限制，maxLength/minLength

效果：

&

代碼：

{    xtype: "textfield",    name: "UserName",    fieldLabel: "使用者名稱",    allowBlank: false,    maxLength: 10,    minLength: 3,    flex: 1}

值大小限制，maxValue/minValue

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

效果：

&

代碼：

{    xtype: "numberfield",    name: "Age",    fieldLabel: "年齡",    maxValue: 60,    minValue: 18,    flex: 1}

vtype驗證

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

• alpha：希臘數字
• alphanum：字母和數字
• email：電子郵件地址
• url：網址

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

效果：

代碼：

{    xtype: "textfield",    name: "Email",    fieldLabel: "Email",    vtype: "email",    flex: 1}

自訂vtype

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

小夥伴們不要嫌棄，接下來我們看一下如何自訂vtype，代碼：

//驗證ip地址Ext.apply(Ext.form.field.VTypes, {    IPAddress: function (v) {        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);    },    IPAddressText: ‘只能輸入ip地址‘,    IPAddressMask: /[\d\.]/i});

用法：

{    xtype: "textfield",    name: "ip",    fieldLabel: "IP地址",    vtype: "IPAddress"}

效果：

本文由齊飛（[email protected]）原創，並發布在http://www.qeefee.com/article/extjs-form-in-detail，轉載請註明出處！推薦更多Extjs教程、Extjs5教程

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