ExtJS入門教程02，form也可以很優雅

在上一篇《Extjs window 入門》中，我們已經看到了如何將一個form組件放到window中，今天我們來看看form的一些優雅的工作方式。

使用fieldDefaults，優雅的設置字段默認值

form中的子項，通常都是field控件，而這些field控件通常都會使用一些相同的配置，例如labelWidth、labelAlign等，如果在每一個field中設置這些屬性就會顯得比較繁瑣，這個時候我們就需要用到fieldDefaults配置項：

{
    xtype: "form",
    bodyPadding: 5,
    border: false,
    fieldDefaults: {
        labelWidth: 50,
        labelAlign: "right"
    },
    items: [
        {
            xtype: "textfield",
            fieldLabel: "姓名",
            name: "UserName"
        },
        {
            xtype: "textarea",
            fieldLabel: "留言",
            name: "Comment"
        }
    ]
}

使用load()方法，優雅的加載數據

向form中綁定數據的方法有好幾種，我們先來看看如何通過異步的方式從服務器來獲取數據的：

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

服務器端返回的數據格式如下：

{
    success:true,
    data:{
        UserName:'QeeFee',    
        Comment:'齊飛是個程序員'
    }
}

這個時候我們的form就會自動將data中的UserName和Comment綁定到界面中：

前面提到，通過ajax異步加載是眾多加載方式中的一種，這時候小伙伴開始問了，那么其他的加載方式呢？

其他還有兩種，是用來加載本地（內存）數據的，例如我們已經存在了一個data數據：

var data = {
    UserName: 'QeeFee',
    Comment: '齊飛是個程序員'
};

我們要把這個data綁定到form中，該怎么做呢？看下面的代碼：

win.down("form").getForm().setValues(data);

一樣的效果，不再截圖了。

接下來是第三種方式，加載record數據。首先，我們的record是需要先定義model的，不了解model是什么的朋友請移步>>ExtJS 4.2 教程-04：數據模型

首先定義一個數據模型：

Ext.define("CommentModel", {
    extend: "Ext.data.Model",
    fields: [
        { name: "UserName", type: "string" },
        { name: "Comment", type: "string" }
    ]
});

有了模型以后，我們需要來創建一個模型的對象：

var comment = Ext.create("CommentModel", {
    UserName: 'QeeFee',
    Comment: '齊飛是個程序員'
});

接下來我們就該完成綁定了：

win.down("form").getForm().loadRecord(comment);

這個時候是不是有些怕麻煩的小伙伴已經開始抱怨了，這么麻煩啊……

其實不是這個樣子的，麻煩自然有麻煩的道理。使用這種綁定方法，我們可以方便的更新模型對象的數據：

win.down("form").updateRecord();
var record = win.down("form").getRecord();
Ext.MessageBox.alert("提示", record.get("UserName"));

看到了吧小伙伴，我們可以使用form逆向的更新record，是不是方便了很多呢？

使用submit()方法，優雅的提交數據

submit()方法和load()方法的用法非常相似，我們可以通過submit方法非常方便的將form表單數據提交到服務器：

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

我們來跟蹤一下服務器接收到的數據：

界面超難看，試試用layout來組織界面

小伙伴看看我們上面的form界面，右側空出很大一片，是不是很丑？

可能你會覺得為form和field加上width屬性，問題自然就解決了，但是如果我們改變了window的寬度呢？仍然去修改form和field嗎？

小伙伴們，是時候使用layout了！

關於extjs的layout，不明白的小伙伴可以參考我之前的文章>>ExtJS 4.2 教程-08：布局系統詳解

接下來我們為window和form添加上布局配置：

{
    xtype: "form",
    bodyPadding: 5,
    border: false,
    layout: "form",
    fieldDefaults: {
        labelWidth: 50,
        labelAlign: "right"
    },
    items: [
        {
            xtype: "textfield",
            fieldLabel: "姓名",
            name: "UserName"
        },
        {
            xtype: "textarea",
            fieldLabel: "留言",
            name: "Comment"
        }
    ]
}

再次打開窗口，看看是不是好了很多：

接下來我們演示一個較為復雜的form：

Ext.onReady(function () {
    var win = Ext.create("Ext.Window", {
        title: "complex form",
        width: 500,
        height: 300,
        layout: "fit",
        items: {
            xtype: "form",
            bodyPadding:5,
            border: false,
            layout: "form",
            fieldDefaults: {
                labelWidth: 60,
                labelAlign: "right"
            },
            items: [
                {
                    xtype: "fieldcontainer",
                    layout: "hbox",
                    items: [
                        { xtype: "textfield", name: "UserName", fieldLabel: "用戶名", flex: 1 },
                        { xtype: "textfield", name: "Age", fieldLabel: "年齡", flex: 1 }
                    ]
                },
                {
                    xtype: "fieldcontainer",
                    layout: "hbox",
                    items: [
                        { xtype: "textfield", name: "TelPhone", fieldLabel: "電話", flex: 1 },
                        { xtype: "textfield", name: "Email", fieldLabel: "Email", flex: 1 }
                    ]
                },
                {
                    xtype: "textarea",
                    fieldLabel: "備注"
                }
            ]
        },
        buttons: [
            { text: "保存" },
            { text: "取消" }
        ]
    });
    win.show();
});

這是一個稍微復雜一點的form，它用到了fieldcontainer來組織字段，效果如下：

小伙伴們，我決定把form的驗證放到明天的文章中進行介紹，請原諒我偷懶。謝謝各位！