實用ExtJS教程100例-011：ExtJS Form 使用JSON數據賦值和取值

上一節中我們演示了ExtJS Form的異步加載和提交數據，本節中我們將演示如何使用JSON數據為ExtJS Form中的字段賦值和取值。

 

使用JSON數據為字段賦值

var formCmp = this.up("form");
var form = formCmp.getForm();

var userValues = {
    UserName: "Qi Fei",
    Email: "[e-mail]"
};

form.setValues(userValues);

在這段代碼中，我們首先得到form組件，然后在得到form basic對象，form basic對象提供了form組件的字段管理、驗證以及提交和加載工作。像上一節中的load和submit方法也都是form basic提供的，form basic才是運行在界面背后的強力支持。

在得到form basic以后，我們聲明一個JSON對象，然后調用form basic的setValues方法為form字段賦值。

獲取Form中字段的值

var formCmp = this.up("form");
var form = formCmp.getForm();
var userValues = form.getValues();

console.log(userValues);

這段代碼中的前兩行與上面的相同，得到form basic對象，在第三行中，通過調用getValues方法取得字段的值，返回值為JSON對象。

在得到form字段的JSON數據以后，我們使用console.log()方法將數據打印出來。

在線示例

完整的示例代碼如下：

Ext.onReady(function () {
    Ext.create("Ext.form.FormPanel", {
        title: "ExtJS Form設置和獲取Values",
        width: 350,
        height: 300,
        x: 30,
        y: 30,
        layout: "form",
        bodyPadding: "5",
        defaultType: "textfield",
        fieldDefaults: { labelAlign: "right", labelWidth: 55 },
        items: [
            { name: "UserName", fieldLabel: "用戶名", allowBlank: false },
            { name: "Email", fieldLabel: "電子郵箱" }
        ],
        buttons: [
            {
                text: "設置Values",
                handler: function () {
                    var formCmp = this.up("form");
                    var form = formCmp.getForm();

                    var userValues = {
                        UserName: "Qi Fei",
                        Email: "[e-mail]"
                    };

                    form.setValues(userValues);
                }
            },
            {
                text: "獲取Values",
                handler: function () {
                    var formCmp = this.up("form");
                    var form = formCmp.getForm();
                    var userValues = form.getValues();

                    console.log(userValues);
                }
            },
            {
                text: "重置",
                handler: function () {
                    var formCmp = this.up("form");
                    formCmp.getForm().reset();
                }
            }
        ],
        renderTo: "container"
    });
});

示例截圖如下：

點擊“設置Values”按鈕：

點擊“獲取Values”按鈕，我們打開控制台，截圖如下：