extjs - 選択したチェックボックスを 5 個に制限する

Question

デフォルトでは、ロード時に2つのチェックボックスが選択され、さらにチェックボックスを選択した後、すべてのチェックボックスを選択しようとすると警告が表示され、すべてを選択することはできません。すべての条件で、1 つまたは最大 5 つのチェックボックスを選択できることを意味します。どうすればこれを実装できますか??

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' }
    ]
}