extjs - Extjs 复选框计数

Question

我正在尝试计算 ext js 中选定的复选框。

如何计算选中的复选框并将它们显示在图像下方显示的区域中。

谢谢

Answer 1

我同意沙。这是一个实际的例子：

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()
});

只需获取此代码，转到ExtJS API Doc for Checkbox并将示例代码替换为上面的代码：然后，推送预览并单击“获取计数器”按钮。它完全按照sha所说的那样做。

再见

Answer 2

您可以将它们全部订阅到一个处理程序，并在该处理程序中根据值进行递增或递减。似乎有什么问题？