Javascript 根据ExtJS 5.1中的条件，防止取消选择xtype:checkbox

ExtJS 5.1

在

xtype:“复选框”

我想在根据条件取消选择复选框之前添加一个条件。根据我的研究，当我们选中或取消选中复选框时，我只得到一个触发的事件

change

。我可以得到正确或错误的复选框

但是我想在取消选中复选框之前触发事件，这样我可以添加一个条件，如果条件为false，那么我将返回false，复选框将不会被取消选中。

确实没有“beforecheck”事件，因此您必须像这样覆盖该方法：

Ext.define('Checkbox', {
    extend: 'Ext.form.field.Checkbox',
    onBoxClick: function() {
        if (this.checked && !this.uncheckCondition()) {
            alert('This checkbox cannot be unchecked because....');
            return;
        }
        return this.callParent(arguments);
    },
    uncheckCondition: function() {
        var OK_to_uncheck = false;
        return OK_to_uncheck;
    }
});

Ext.define('Checkbox', {
    override: 'Ext.form.field.Checkbox',
    onBoxClick: function() {
        if (this.checked && this.fireEvent('beforeuncheck', this) === false) {
            return;
        }
        return this.callParent(arguments);
    }
});

例如：

请注意，让用户知道为什么不能取消选中复选框是一个好主意，否则他们可能会认为它不起作用。考虑到这一点，我会考虑禁用复选框或当无法取消检查条件时。

更新

实际上，您可以使用“beforeuncheck”事件增强checkbox类，如下所示：

Ext.define('Checkbox', {
    extend: 'Ext.form.field.Checkbox',
    onBoxClick: function() {
        if (this.checked && !this.uncheckCondition()) {
            alert('This checkbox cannot be unchecked because....');
            return;
        }
        return this.callParent(arguments);
    },
    uncheckCondition: function() {
        var OK_to_uncheck = false;
        return OK_to_uncheck;
    }
});

Ext.define('Checkbox', {
    override: 'Ext.form.field.Checkbox',
    onBoxClick: function() {
        if (this.checked && this.fireEvent('beforeuncheck', this) === false) {
            return;
        }
        return this.callParent(arguments);
    }
});

然后使用：

new Ext.form.field.Checkbox({
    renderTo: Ext.getBody(),
    boxLabel: 'I am too clever checkbox',
    listeners: {
        beforeuncheck: function() {
            alert('No, you cannot uncheck me, he he :)');
            return false;
        }
    }
});

---

示例：

您正在使用MVVM吗？然后可以在viewmodel上进行验证。你在用MVC吗？然后，您可以在记录字段上验证绑定到formfield。绝对-防止用户尝试更改复选框，而不是尝试否决更改。