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.

How are you setting the value? The value never changes, so get it from there. — Evan Trimboli
@Evan you can see the displayfield, i am setting the value while creating the field — MadTech
Yeah, But the form.getValues() is returning the value object for "textfield" but not for "displayfield". If i change the xtype to "textfield" i am getting the value. But i want the field as displayfield. — MadTech
Docs: "A display-only text field which is not validated and not submitted. This is useful for when you want to display a value from a form's loaded data but do not want to allow the user to edit or submit that value." Link(at the beginning): docs.sencha.com/extjs/6.0.0/classic/Ext.form.field.Display.html — beso9595

Narendra Jadhav Narendra Jadhav · Accepted Answer · 2018-08-07T05:18:01

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
                    });
                }
            }]
        });
    }
});

How to get values of DisplayField from Form Extjs 6.0.2?

1 Answers