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

【问题标题】：Prevent deselect of xtype:checkbox based on condition in ExtJS 5.1防止根据 ExtJS 5.1 中的条件取消选择 xtype:checkbox
【发布时间】：2015-08-26 16:45:02
【问题描述】：

ExtJS 5.1

在xtype: 'checkbox'

我想根据条件在取消选中复选框之前添加一个条件。根据我的研究，当我们选中或取消选中复选框时，我只收到了一个事件change。我可以得到复选框是真还是假。

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

【问题讨论】：

你在使用 MVVM 吗？然后您可以在视图模型上进行验证。你在使用 MVC 吗？然后您可以在记录字段上验证绑定到表单字段。

标签： javascript extjs checkbox extjs5

【解决方案1】：

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

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;
    }
});

示例：https://fiddle.sencha.com/#fiddle/sro

请注意，最好让用户知道为什么他们不能取消选中该复选框，否则他们可能会认为它不起作用。考虑到这一点，我会考虑在满足无法取消选中条件时禁用复选框或 readOnly。

更新

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

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;
        }
    }
});

示例：https://fiddle.sencha.com/#fiddle/srq

【讨论】：

绝对 - 阻止用户尝试更改复选框，而不是尝试否决更改。