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

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

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

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，可以在服務器端獲取到。

 

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"
}

效果：