Question

I have six checkboxes, by default two checkboxes will be selected at loading time, and after I want to select more checkboxes , but if I try to select all checkboxes It will show alert and not possible to select all. Means in every condition it can select one or upto five checkboxes. So How Can I implement this ??

Answer 1

Use a Checkboxgroup and validate on change. Here’s a working example:

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