How to get values of DisplayField from Form Extjs 6.0.2?

Question

I am trying to get the values of dispalyfield from form using this.up('form').getValues() . But i am getting as empty object.

Can someone help me on this? Extjs version 6.0.2

Here Sample Code I tried:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 175,
    height: 150,
    bodyPadding: 10,
    title: 'Final Score',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],
    buttons: [{
        text: 'Update',
        handler: function (button, e) {
            var form = this.up('form');
            var values = form.getValues();

            Ext.log({
                msg: "values: ",
                values
            });

            Ext.log({
                msg: "Home: " + values.home_score
            });

            Ext.log({
                msg: "Visitor: " + values.visitor_score
            });

        }
    }]
});

Note: Display Field ----- Ext.getCmp("someID").getValue() I tried and getting the value. But I want to get and set values of dispalyfield from form without getCmp and ID.

Answer 1

For this you need to use form.getForm() it will return the Ext.form.Basic form. Now you need to use getFieldValues() for getting the values and setValues() for setting values of fields.

In this Fiddle, I have created an demo using above method.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 175,
            height: 150,
            bodyPadding: 10,
            title: 'Final Score',
            items: [{
                xtype: 'displayfield',
                fieldLabel: 'Home',
                name: 'home_score',
                value: '10'
            }, {
                xtype: 'displayfield',
                fieldLabel: 'Visitor',
                name: 'visitor_score',
                value: '11'
            }],
            buttons: [{
                text: 'Update',
                handler: function (button, e) {
                    var form = this.up('form').getForm(),
                        values = form.getFieldValues();

                    Ext.log({
                        msg: "values: " + Ext.encode(values)
                    });

                    Ext.log({
                        msg: "Home: " + values.home_score
                    });

                    Ext.log({
                        msg: "Visitor: " + values.visitor_score
                    });

                    form.setValues({
                        home_score: 100,
                        visitor_score: 111
                    });
                }
            }]
        });
    }
});