extjs radiogroup before change event

Question

Could you please help me before change/check the event on ExtJS radiogroup. I want some event should check before changing the radio button based on the condition. I need to allow user to change the select another radio button if condition says false, then we need to select the old radio button only.

Please refer the below code:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'RadioGroup Example',
            width: 300,
            height: 125,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'radiogroup',
                fieldLabel: 'Gender',
                columns: 1,
                items: [{
                    boxLabel: 'Male',
                    name: 'rb',
                    inputValue: '1'
                }, {
                    boxLabel: 'Female',
                    name: 'rb',
                    inputValue: '2',
                }],
                listeners: {
                    change: function(field, newValue, oldValue, eOpts) {
                        console.log(newValue);
                        alert(newValue.rb);
                    },
                }
            }]
        });
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/32fb

Where should be a condition? In change event listener? Is available before render? — norbeq
if we have before change event that would be better, before selecting another radio button need to validate some properties if those are fine then continue otherwise it has to respect old radio button. — Rambabu Pudi
Here isn't before change event. So you should make logic (setting value, disabling radio group etc.), when you change other properties. — norbeq

Robert Watkins Robert Watkins · Accepted Answer · 2020-01-07T20:34:18

As mentioned in the comments, there is no beforechange event that can be used to veto a change.

Some other options are:

you can the change listener to validate the radiogroup, making it invalid if an option is selected that's not right. This way the user is passively informed that there's a problem, and they have to fix it.
you can get the behaviour you described by using the oldvalue argument, and simply setting the radio control back to the old value:

change: function(field, newValue, oldValue, eOpts) {
  if (<new value isn't acceptable>) {
     // Probably should let the user know why
     field.setValue(oldValue);
     return;
  }
  ... any other change logic here.
}

You can also use the change listener enable and disable options pre-emptively as the form state changes, thus preventing the user from making a bad choice in the first place.

extjs radiogroup before change event

1 Answers