extjs - Extjsチェックボックスカウント

Question

extjsで選択したチェックボックスを数えようとしています。

選択したチェックボックスを数えて、下の画像の領域に表示するにはどうすればよいですか。

ありがとう

Answer 1

それらすべてを1つのハンドラーにサブスクライブでき、そのハンドラーで値に基づいてインクリメントまたはデクリメントを実行します。何が問題だと思われますか？

Answer 2

私はshaに同意します。これが実際の例です。

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に移動して、サンプルコードを上記に置き換えます。次に、プレビューを押して、[GetCounter]ボタンをクリックします。それはshaが言ったことを正確に行います。

チャオ