ExtJs set RadioGroup Item by model

Question

i have some problems setting the selected item of a radio button group by my viewmodel. Is it possible to set the selected value by the name of the element? I expected hat the viewmodel gender = true matches the second ('female') radio button.

Ext.application({    
    launch: function () {

        var form = Ext.widget('form', {

            renderTo: Ext.getBody(),
            viewModel: {
                data: {
                    gender: true
                }
            },

            items: [{
                xtype: 'radiogroup',
                fieldLabel: 'Gender',
                name: 'rbGender',
                defaults: {
                    flex: 1
                },
                layout: 'hbox',
                items: [{
                    boxLabel: 'Male',
                    name: 'gender',
                    inputValue: false,
                    id: 'radio1'
                }, {
                    boxLabel: 'Female',
                    name: 'gender',
                    inputValue: true,
                    id: 'radio2'
                }]
            }]

        });

    }
});

Alexander Alexander · Accepted Answer · 2017-11-06T16:17:46

No, this is not possible with viewModel. viewModel always relies on the bind configuration, e.g.

bind: '{gender}',

You don't want to bind the radio control, you want to bind the radiogroup. What you also want to do is to set the radiogroup to simpleValue: true.

Working example:

viewModel: {
    data: {
        gender: false
    }
},

items: [{
    xtype: 'radiogroup',
    fieldLabel: 'Gender',
    name: 'rbGender',
    bind: '{gender}', // <- bind this field to the viewModel's "gender" value.
    simpleValue: true, // <- use a boolean, not an object.
    defaults: {
        flex: 1
    },
    ...

If you want to do the "old-school" way with name, you have to use form.setValues() and form.getValues() instead of the viewModel.

In ExtJS 5.x, simpleValue is not available and the defaultBindProperty is null, so you have to change:

viewModel: {
    data: {
        gender: { // In ExtJS 5, radiogroups can only take objects, not simple values
            rbGender: false
        }
    }
},

items: [{
    xtype: 'radiogroup',
    fieldLabel: 'Gender',
    name: 'rbGender',
    bind: { // bind has to be a complex object, because defaultBindProperty is not available.
        value:'{gender}'
    },

    items: [{
        boxLabel: 'Male',
        name: 'rbGender', // <- tell the radiogroup to put the rbGender property into these checkboxes

ExtJs set RadioGroup Item by model

1 Answers