ExtJS : Unable to mark checkbox false in change event

Question

We have an on-screen business rule, where on the particular condition I can perform some action. Now after upgrade to ExtJS 6.5 something is broken.

Below code summarizes my problem

I basically want to set the checkbox to false whenever someone clicks it.

FYI, I can't use setReadonly() in my problem.

behavior on version 5.1.3.228: The checkbox doesn't get checked, which is expected behavior on version 6.5.2.463: The checkbox gets checked and after that, you can't unchecked it.

Ext.application({
    name : 'Fiddle',
    launch : function() {
           Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            width: 300,
            title: 'Checkbox Title',
            items: [
                {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'This is Checkbox',
                    defaultType: 'checkbox',
                    items: [
                        {
                            boxLabel  : 'Check me',
                            name      : 'checkbox',
                            listeners : {
                                change : function (){
                                    this.setValue(false)
                                }
                            }
                        }
                    ]
                }
            ],
            renderTo: Ext.getBody()
        });
    }
});

Answer 1

You can use this.setChecked to retain your functionality.

Ext.application({
    name : 'Fiddle',
    launch : function() {
       Ext.Msg.show({
            bodyPadding: 10,
            width: 300,
            title: 'Checkbox Title',
            items: [
                {
                    xtype: 'fieldcontainer',
                    fieldLabel: 'This is Checkbox',
                    defaultType: 'checkbox',
                    items: [
                        {
                            boxLabel  : 'Check me',
                            name      : 'checkbox',
                            checked: true,
                            listeners : {
                                change : function () {
                                    this.setChecked(false);
                                }
                            }
                        }
                    ]
                }
            ],
        });
    }
});

(Used Ext.Msg.show to see the panel in a fiddle)