Question

I am trying to count the selected checkboxes in ext js.

How do I count the selected checkbox and display them in a area shownbelow in the image.

Thanks

Answer 1

I’m agree with sha. Here it is a practical example:

var index = 0;

var changeCounter = function (cb, nv, ov) {
  if (nv) index++;
  else index--;
}
Ext.create('Ext.form.Panel', {
  bodyPadding: 10,
  width: 300,
  title: 'Pizza Order',
  items: [
    {
        xtype: 'fieldcontainer',
        fieldLabel: 'Toppings',
        defaultType: 'checkboxfield',
        items: [
            {
                boxLabel  : 'Anchovies',
                name      : 'topping',
                inputValue: '1',
                id        : 'checkbox1' ,
                listeners: {
                    change: changeCounter
                }
            }, {
                boxLabel  : 'Artichoke Hearts',
                name      : 'topping',
                inputValue: '2',
                id        : 'checkbox2' ,
                listeners: {
                    change: changeCounter
                }
            }, {
                boxLabel  : 'Bacon',
                name      : 'topping',
                inputValue: '3',
                id        : 'checkbox3' ,
                listeners: {
                    change: changeCounter
                }
            }
        ]
    }
],
bbar: [
    {
        text: 'Get Counter' ,
        handler: function () {
            alert (index);
        }
    } ,
    {
        text: 'Select Bacon',
        handler: function() {
            Ext.getCmp('checkbox3').setValue(true);
        }
    },
    '-',
    {
        text: 'Select All',
        handler: function() {
            Ext.getCmp('checkbox1').setValue(true);
            Ext.getCmp('checkbox2').setValue(true);
            Ext.getCmp('checkbox3').setValue(true);
        }
    },
    {
        text: 'Deselect All',
        handler: function() {
            Ext.getCmp('checkbox1').setValue(false);
            Ext.getCmp('checkbox2').setValue(false);
            Ext.getCmp('checkbox3').setValue(false);
        }
    }
],
renderTo: Ext.getBody()
});

Just take this code, go to ExtJS API Doc for Checkbox and replace the example code with the above: then, push preview and click on the button ‘Get Counter’.
It does exactly what sha said.

Ciao