Extjs Form用法詳解

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

本文由齊飛（youring2@gmail.com）原創，併發布在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"
}

效果：