ExtJs4学习（十四）Form 加载/更新Record（Model）

浏览数：44 / 时间：2015年06月09日

什么是Record呢？Record是数据模型对象中的一条记录，所以在使用Record之前，我们需要先定义Model。

Model定义

关于Model的定义，我们单独进行演示，今天只是简单的用到，Model代码如下：

Ext.define("UserModel", {
    extend: ‘Ext.data.Model‘,
    fields: ["UserName", "Email"]
});

定义好Model之后，我们可以创建一条记录：

var userRecord = Ext.create("UserModel", {
    UserName: "Qi Fei",
    Email: "[email protected]"
});

Form加载Record

Form组件提供了loadRecord()方法来加载Record对象。

var formCmp = this.up("form");
formCmp.loadRecord(userRecord);

Form更新Record

当我们对Form中数据进行编辑之后，希望将更改后的结果反映到Record中，这时我们就需要使用updateRecord()方法了，使用updateRecord方法的前提是，我们的Form已经调用loadRecord方法绑定了Record数据。

var formCmp = this.up("form");
formCmp.updateRecord();
console.log(userRecord);

移除Form绑定的Record

Form绑定Record以后，如果我们需要基础绑定，可以使用Reset方法，传入参数true，此时Form界面和绑定的Record都会被清除。

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

在线示例

整个演示的完整代码如下：

Ext.onReady(function () {
    Ext.define("UserModel", {
        extend: ‘Ext.data.Model‘,
        fields: ["UserName", "Email"]
    });
    var userRecord = Ext.create("UserModel", {
        UserName: "Qi Fei",
        Email: "[email protected]"
    });

    Ext.create("Ext.form.FormPanel", {
        title: "ExtJS Form加载/更新Record",
        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: "加载Record",
                handler: function () {
                    var formCmp = this.up("form");
                    formCmp.loadRecord(userRecord);
                }
            },
            {
                text: "更新Record",
                handler: function () {
                    var formCmp = this.up("form");
                    formCmp.updateRecord();
                    console.log(userRecord);
                }
            },
            {
                text: "重置",
                handler: function () {
                    var formCmp = this.up("form");
                    formCmp.getForm().reset(true);
                }
            }
        ],
        renderTo: "container"
    });
});