ExtJs4 Learning (fourteen) Form loading/updating Record (Model), extjs4record

ExtJs4 Learning (fourteen) Form loading/updating Record (Model), extjs4record

What is Record? A Record is a Record in a data Model object. Therefore, before using a Record, we need to define a Model.

Model Definition

For the definition of the Model, we will demonstrate it separately. Today it is only simple to use. The Model code is as follows:

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

After defining the Model, we can create a record:

var userRecord = Ext.create("UserModel", {    UserName: "Qi Fei",    Email: "youring2@gmail.com"});

Form load Record

The Form component provides the loadRecord () method to load Record objects.

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

Form updates Record

When we edit the data in the Form and want to reflect the changed results to the Record, we need to use the updateRecord () method. The premise of using the updateRecord method is, our Form has called the loadRecord method to bind the Record data.

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

Remove Record bound to Form

After the Form is bound to a Record, if we need to bind the basic Record, we can use the Reset method to pass in the true parameter. In this case, both the Form interface and the bound Record are cleared.

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

Online example

The complete code for the entire demonstration is as follows:

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 loading/updating Record ", width: 350, height: 300, x: 30, y: 30, layout:" form ", bodyPadding: "5", defaultType: "textfield", fieldDefaults: {labelAlign: "right", labelWidth: 55}, items: [{name: "UserName", fieldLabel: "UserName ", allowBlank: false },{ name: "Email", fieldLabel: "Email"}], buttons: [{text: "loading Record", handler: function () {var formCmp = this. up ("form"); formCmp. loadRecord (userRecord) ;},{ text: "Update Record", handler: function () {var formCmp = this. up ("form"); formCmp. updateRecord (); console. log (userRecord) ;}}, {text: "reset", handler: function () {var formCmp = this. up ("form"); formCmp. getForm (). reset (true) ;}}], renderTo: "container "});});

Click to view Online Demo