Extjs Validate form checkboxfield

Question

How can I validate a checkboxfield in a form? I want the form to be valid ONLY if the checkboxfield is selected/checked. How can I achieve this?

I have created this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/359u

        xtype: 'checkboxfield',
        name: 'accept',
        required: true,

If I remove the required: true, for the checkboxfield then the form is valid.

I am using Extjs 7.1.0 Modern

Answer 1

It looks like there is a bug in sencha framework.

I created workaround for it:

let form = Ext.create({
    xtype: 'formpanel',
    renderTo: document.body,
    items: [{
        xtype: 'textfield',
        name: 'name',
        value: 'My Name',
        required: true,
        label: 'Name'
    }, {
        xtype: 'checkboxfield',
        name: 'accept',
        required: true,
        label: 'Accept Terms and Conditions',
        listeners: {
            change: function (field, newValue) {
                if (newValue) {
                    this.setValue(newValue);
                } else {
                    this.setValue(null);
                }

            }
        }
    }],
    buttons: [{
        text: 'check',
        handler: function () {
            let form = Ext.first('formpanel');
            let valid = form.validate();
            Ext.toast(Ext.String.format('Valid: {0}', valid))
        }

    }]
});

Example on fiddle: https://fiddle.sencha.com/#view/editor&fiddle/35a1

Answer 2

Another solution I have found is the upper answer and this:

Ext.define('MyCheckboxOverride', {
    override: 'Ext.field.Checkbox',

    updateChecked: function(value){
        console.log('updateChecked', value, this);
        this.callParent(arguments);
        this.setValue(value || null)
    }

});

https://fiddle.sencha.com/#view/editor&fiddle/35a5

Remark!!!

The combobox will submit true and NOT the value if this is set value: 'foo'