Ext JS form load custom object

I have a custom object currentUser, it contains bank account name, mobile number,  and I want fill the form with currentUser’s properties.

var currentUser = {
                "userName": "13853800001",
                "mobileNumber": "13853800001",
                "bankAccountName": null,
                "bankCardNo": null,
                "bankBranchName": null,
                "roles": [{"name": "agent", "level": 3}],
                "unionBankNo": null
            };

To load a custom object,  first define a Model, then instantiate the Model with custom object, next call loadRecord with the model object. Note that I tried Ext.form.Panel loadRecord(), it’s not working for me, Ext.form.Basic should be used here. So we need call getForm() to get Ext.form.Basic

Ext.define('UserInfoModel', {
   extend: 'Ext.data.Model',
   fields: ['bankCardNo', 'bankBranchName', 'unionBankNo']
});
var form = Ext.getCmp('editUserForm').getForm();
form.loadRecord(new UserInfoModel(currentUser));

Another example

Ext.define('Thing', {
    extend:'Ext.data.Model',
    fields:[
        'name'
    ]
});

Ext.application({
    launch: function() {
        var form = Ext.create('Form1');
        
        Ext.util.Observable.capture(form, function() {
            console.log('form', this, arguments);
        });
        
        form.loadRecord(new Thing({name:'neil'}));
        
    }
});

http://jsfiddle.net/el_chief/HBah5/4/

The post Ext JS form load custom object appeared first on Redino blog.