extjs - 将选中的复选框限制为 5 个

Question

我有六个复选框，默认情况下，加载时会选择两个复选框，在我想选择更多复选框之后，但是如果我尝试选择所有复选框，它将显示警报并且无法选择全部。意味着在每种情况下，它都可以选择一个或最多五个复选​​框。那么我该如何实现呢？

Answer 1

使用 Checkboxgroup 并验证更改。这是一个工作示例：

{
    xtype: 'checkboxgroup',
    fieldLabel: 'Two Columns',
    // Arrange checkboxes into two columns, distributed vertically
    columns: 2,
    vertical: true,
    msgTarget: 'title',
    listeners: {
        change: function(cb,nv,ov) {
            if(Ext.isArray(nv.rb)) {
                if(nv.rb.length > 5){
                    cb.markInvalid('You can select only 5!');
                } else {
                   cb.clearInvalid(); 
                }
            } else {
                cb.markInvalid('You need to select at least 2!');
            }
        }
    },
    items: [
        { boxLabel: 'Item 1', name: 'rb', inputValue: '1', checked: true },
        { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true },
        { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },
        { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },
        { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },
        { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
    ]
}