ExtJs getRecord() function of form does not work

Question

I would like to get my values from my form through the getRecord() function. This is the result im currently getting from form.getRecord():

getRecord

The data object is empty.

This is my controller:

onAddNewsClick: function(button, e, eOpts) {

    var win = this.getNewsEdit();
    if(!win){
        win = Ext.create('widget.newsedit');
    }
    this.getNewsPanel().loadRecord(Ext.create('model.news'));
    console.log(this.getNewsPanel());
    this.adding = true;
    win.show();
},

OnSaveNewsClick: function(button, e, eOpts) {

    var form = this.getNewsPanel();
    console.log(form);
    var selectedRecord = form.getRecord();
    console.log(selectedRecord);
    if (this.adding) {
        this.adding = undefined;
    }
}

The correspoding Model:

Ext.define('mobile_admin.model.News', {
extend: 'Ext.data.Model',
alias: 'model.news',

requires: [
    'Ext.data.field.Field'
],

fields: [
    {
        name: 'title'
    },
    {
        name: 'newscontent'
    },
    {
        name: 'newsdate'
    },
    {
        name: 'status'
    }
]});

With form.getValues() I get all the values of the form.

It feels like that the model is not connecting to the form. In the form I put the necessary name connection: (http://docs.sencha.com/extjs/5.1.0/Ext.form.Basic.html#method-loadRecord)

My Form items:

    items: [
    {
        xtype: 'textfield',
        fieldLabel: 'Titel',
        name: 'title'
    },
    {
        xtype: 'datefield',
        fieldLabel: 'Datum',
        name: 'newsdate'
    },
    {
        xtype: 'htmleditor',
        height: 150,
        width: 600,
        fieldLabel: 'Inhalt',
        name: 'newscontent',
    },
    {
        xtype: 'textfield',
        fieldLabel: 'Status',
        name: 'status'
    },
]

Anyone has an idea? I use ExtJs (5.1.3).

//EDIT: I found out that I can set the record like this:

var b = form.getRecord()
b.set(form.getValues()

Shouln't this ExtJs do automatically?

Filip Filip · Accepted Answer · 2016-08-09T21:21:48

What loadRecord really do is just setting values. Form don't use this record any more. Here is form docs:

loadRecord: function(record) {
    this._record = record;
    return this.setValues(record.getData());
},

You asked if setting values to record can be done automatically. Yes, it is possible, but binding is required.

I prepared a sample code:

Ext.define('mobile_admin.model.News', {
    extend: 'Ext.data.Model',
    alias: 'model.news',

    requires: [
        'Ext.data.field.Field'
    ],

    fields: [
        {
            name: 'title', defaultValue : 'test'
        },
        {
            name: 'newscontent'
        },
        {
            name: 'newsdate'
        },
        {
            name: 'status'
        }
    ]
});

Ext.define('mobile_admin.form.ViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.formpanel',

    links : {
        theModel : {
            type : 'mobile_admin.model.News',
            create : true
        }
    }
});

Ext.define('mobile_admin.form.formpanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.newsedit',
    viewModel : 'formpanel',

    items : [
        {
            xtype: 'textfield',
            fieldLabel: 'Titel',
            name: 'title',
            bind : {
                value : '{theModel.title}'
            }
        },
        {
            xtype: 'datefield',
            fieldLabel: 'Datum',
            name: 'newsdate',
            bind : {
                value : '{theModel.newsdate}'
            }
        },
        {
            xtype: 'htmleditor',
            height: 150,
            width: 600,
            fieldLabel: 'Inhalt',
            name: 'newscontent',
            bind : {
                value : '{theModel.newscontent}'
            }
        },
        {
            xtype: 'textfield',
            fieldLabel: 'Status',
            name: 'status',
            bind : {
                value : '{theModel.status}'
            }
        }],

    buttons : [{
        text : 'Save',
        handler : function(button) {
            var vM = button.up('form').getViewModel();
            vM.notify();
            console.log(vM.get('theModel').getData());
        }
    }]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        debugger;
        var form = Ext.widget('newsedit');
        var window = Ext.widget('window', {
            items : form
        });
        window.show();
    }
});

ExtJs getRecord() function of form does not work

1 Answers