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

来源：互联网发布：mac运行exe文件编辑：程序博客网时间：2024/06/15 21:21

什么是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: "youring2@gmail.com"});

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: "youring2@gmail.com"    });    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"    });});

点击查看在线演示

0 0