ExtJS升级至6.5后Checkbox在change事件中无法设为false的问题

Hey there, I’ve run into similar behavior when upgrading ExtJS versions—let’s break down why your Checkbox is misbehaving in 6.5 and fix it.

问题回顾 #

You’ve got a business rule where a Checkbox should never be checked, so you’re trying to set it to false in the change event. This worked perfectly in ExtJS 5.1.3, but in 6.5.2:

• The Checkbox gets checked on click
• After that, you can’t uncheck it at all
• And you can’t use setReadonly() to lock it down

问题根源 #

The core issue is a change in how ExtJS 6 handles component state updates and the change event lifecycle. When you click the Checkbox, ExtJS starts updating its internal state immediately. Your setValue(false) call in the change event clashes with this internal update—by the time your code runs, the component has already marked itself as checked, creating a state conflict that leaves it stuck.

解决方案1：使用beforechange事件（推荐） #

The beforechange event fires before the Checkbox’s state actually changes, so you can prevent the unwanted state update entirely. This is the cleanest approach because it stops the problem before it starts:

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 : {
                                beforechange : function (checkbox, newValue) {
                                    // Cancel the state change entirely
                                    return false;
                                }
                            }
                        }
                    ]
                }
            ],
            renderTo: Ext.getBody()
        });
    }
});

Returning false from beforechange tells ExtJS to abort the state update, so the Checkbox never gets checked—exactly matching your expected behavior from ExtJS 5.

解决方案2：延迟执行setValue(false)（兼容change事件场景） #

If you absolutely need to stick with the change event for some reason, wrapping your setValue call in a setTimeout lets ExtJS finish its internal state updates first before you override it. This avoids the state conflict:

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 (checkbox) {
                                    // Push the reset to the end of the event loop
                                    setTimeout(function() {
                                        checkbox.setValue(false);
                                    }, 0);
                                }
                            }
                        }
                    ]
                }
            ],
            renderTo: Ext.getBody()
        });
    }
});

The 0ms timeout ensures your code runs after ExtJS has finished processing the click and initial state change, so the reset works without conflict.

总结 #

The beforechange approach is the better long-term fix because it prevents the unwanted state change instead of correcting it after the fact. Both solutions will get your Checkbox behaving exactly like it did in ExtJS 5.1.3.

内容的提问来源于stack exchange，提问作者sadique urf arbaz