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

Question

ExtJS 5.1

在xtype: 'checkbox'

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

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

Answer 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" 事件增强复选框 class，如下所示：

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

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

Prevent deselect of xtype:checkbox based on condition in ExtJS 5.1

javascript

checkbox

extjs

extjs5