CODEWITHSUNDEEP
extjs
user244394
user244394

Reputation: 13448

Extjs Checkbox count

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 enter image description here

Upvotes: 1

Views: 1028

Answers (2)

Wilk
Wilk

Reputation: 8113

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

Upvotes: 2

sha
sha

Reputation: 17860

You can subscribe them all to one handler and in that handler do whether increment or decrement based on the value. What seems to be a problem?

Upvotes: 2

Related Questions