ExtJs 4ラーニング(14)Formロード/更新Record(Model)

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ロードレコード
Formコンポーネントは、RecordオブジェクトをロードするloadRecord()メソッドを提供します.

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

Form更新レコード
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"
    });
});

クリックしてオンラインプレゼンテーションを表示