实用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: "youring2@gmail.com"
};
 
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: "youring2@gmail.com"
                    };
 
                    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”按钮，我们打开控制台，截图如下：