将选中的复选框限制为5

时间:2012-11-21 06:03:30

标签: extjs extjs4

我有六个复选框,默认情况下会在加载时选中两个复选框,在我想选择更多复选框之后,但是如果我尝试选中所有复选框它会显示警告而不能全部选中。在每种情况下都可以选择一个或最多五个复选​​框。那么我该如何实现呢?

1 个答案:

答案 0 :(得分: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' }
    ]
}